[TS] 타입스크립트 기초
53717 단어 TypeSctiptTypeSctipt
1. 타입스트립트 기본
function add(num1: number, num2: number) : void {
console.log(num1 + num2)
}
function show1 (arr: number[]) {
arr.forEach(el => console.log(el))
}
function show2 (arr: Array<number>) {
arr.forEach(el => console.log(el))
}
type Score = "A" | "B" | "C" | "d"
interface User {
name : string;
age : number;
gender? : string; // 옵션값
readonly birthYear : number;
[grade:number] : Score // 타입을 지정한 스코어를 쓰겠다
}
let user : User = {
name : "somin",
age: 26,
birthYear : 1996,
1 : 'A',
}
user.gender = 'female' // 옵션값이므로 나중에 추가 가능
2. 인터페이스
interface Add {
(num1 : number, num2: number) : number;
}
const add2 : Add = function (x, y) {
return x + y
}
interface IsAdult {
(age:number) : boolean
}
const a : IsAdult = (age) => {
return age > 19;
}
a(26) // true
interface Car {
color : string;
wheels: number;
start() : void;
}
class Bmw implements Car {
color = "red";
wheels = 4;
start() {
console.log("gogogo")
}
}
class Bmw2 implements Car {
color;
wheels = 4;
start() {
console.log("gogogo")
}
constructor (c : string) {
this.color = c
}
}
const b = new Bmw2("green")
interface Benz extends Car {
door : number,
stop () : void
}
class benz implements Benz {
color = "red";
wheels = 4;
start() {
console.log("gogogo")
}
door = 5;
stop(){
console.log("stopstop")
}
}
interface Toy {
nema : string;
}
interface ToyCar extends Car, Toy {
price : number
}
3. 함수
function hello(name? : string) { // 물음표는 옵셔널
return `hello, ${name} || "world`
}
const result = hello()
function hello2(name = "world") { // 물음표는 옵셔널
return `hello, ${name}`
}
function add3(...nums: number[]) {
return nums.reduce((result, num) => result + num, 0)
}
interface User1 {
name : string;
}
const Sam: User1 = {
name : 'sam'
}
function showName(this:User1) {
console.log(this.name)
}
const a1 = showName.bind(Sam);
a1();
interface User2 {
name: string;
age: number;
}
// 전달받은 매개변수의 타입에 따라 결과가 달라지는 경우 오버로드 사용(위 2개)
function join(name: string, age: number ) : User2
function join(name: string, age: string ) : string
function join(name: string, age: number | string): User2 | string{
if(typeof age === "number") {
return {
name,
age,
}
} else {
return "나이는 숫자로 입력해 주세요"
}
}
const sam: User2 = join("sam", 26)
const jane: string = join("sam", "26")
4. 리터럴, 유니온(|), 교차 타입
// 리터럴, 유니온(|) 타입
const userName1 = "bob"
let userName2 = "tom"
type Job = "police" | "developer" | "teacher";
interface User3 {
name : string;
job : Job;
}
const user4 : User3 = {
name : "bob",
job : "police",
}
interface Computer {
name: "computer";
color : string;
start() : void;
}
interface Mobile {
name: "mobile";
color : string;
call() : void;
}
const getGift = (gift: Computer | Mobile) => {
console.log(gift.color);
if(gift.name === "computer") {
gift.start()
} else {
gift.call()
}
}
// 교차 타입 : 여러 타입을 합쳐서 사용
interface Car2 {
name : string;
start() : void;
}
interface Toy2 {
name : string;
color : string;
price : number;
}
const toyCar : Toy2 & Car2 = {
name : "타요",
start(){
console.log("goooo")
},
color: "blue",
price: 20000,
}
6. 클래스
class Car {
// color : string;
// 위에처럼 명시해주지 않아도 아래처럼 public이나 readonly를 적어줄 수 있음
constructor( color : string) {
this.color = color;
}
static start() {
console.log("go")
}
}
// 접근 제한자
// public(디폴트값) : 자식 클래스(class Bmw extends Car)에서는 접근 가능, 클래스 인스턴스(new Bmw)에서는 참조 가능
// private(#을 붙여 표현하기도) : 자식 클래스에서는 접근 불가, 해당 클래스 내부에서만 접근 가능
// protected : 자식 클래스에서는 접근 가능하나 클래스 인스턴스에서는 참조 불가
// readonly : 읽기 전용 프로퍼티
// static으로 선언된 프로퍼티의 경우 this로 접근하는 것이 아닌 클래스 명으로 접근헤야 함
// 추상 클래스 : abstrat 를 적어줌 > new로 클래스 인스턴스를 만들어낼 수 없음
// 추상 클래스 내부에 추상 메소드는 상속받은 쪽에서 구체적 구현을 해줘야 함
7. 제네릭
// 제네릭 미사용
function getSize(arr : number[] | string[]) : number {
return arr.length
}
const arr1 = [1, 2, 3]
getSize(arr1)
const arr2 = ["a", "b", "c"]
getSize(arr2)
// 제네릭 사용
// <T> : 타입 파라미터 (일반적으로 T를 쓰는 것일 뿐)
function getSize1<T>(arr : T[]) : number {
return arr.length
}
getSize1<number>(arr1)
getSize1<string>(arr2)
interface Phone<T> {
name: string;
price: number;
option: T;
}
const p1: Phone<object> = {
name: "13",
price: 1000000,
option : {
color : "white",
coupon : false,
}
}
const p2: Phone<string> = {
name: "12",
price: 800000,
option : "old",
}
interface A {
name : string;
age : number;
}
interface B {
name : string;
color : string;
}
interface C {
price : number;
}
const aaa : A = {name: "aaa", age: 10}
const bbb : B = {name: "aaa", color: "red"}
const ccc : C = { price: 10}
function showName3 <T extends {name : string}>(data:T): string {
return data.name
}
showName3(aaa) // "aaa"
showName3(bbb) // "bbb"
// showName3(ccc) : 이름이 없어 에러
8. 유틸리티 타입
// 유틸리티 타입
interface User5 {
id: number;
name: string;
age: number;
gender?: "m" | "f"
}
// keyof
type UserKey = keyof User5; // "id" | "name" | "age" | "gender"
const uk:UserKey = "id"
// Partial<T> : 프로퍼티를 모두 옵셔널로 바꿔줌
// interface User5 {
// id?: number;
// name?: string;
// age?: number;
// gender?: "m" | "f"
// }
let admin:Partial<User5> = {
id: 1,
name: "kkakka"
}
// Required<T> : 프로퍼티를 모두 필수로 바꿔줌
let admin2:Required<User5> = {
id: 1,
age: 26,
name: "kkakka",
gender: "f"
}
// Readonly<T> : 프로퍼티를 읽기 전용으로 바꿔줌(값을 바꿀 수 없음)
// Record<K, T>
interface Score2 {
"1": "A" | "B" | "C";
"2": "A" | "B" | "C";
"3": "A" | "B" | "C";
}
const score1: Score2 = {
1: "A",
2: "B",
3: "C",
}
const score2: Record<"1"|"2"|"3", "A" | "B" | "C"> = {
1: "A",
2: "B",
3: "C",
}
type Grade3 = "1"|"2"|"3"
type Score3 = "A" | "B" | "C"
const score3: Record<Grade3, Score3> = {
1: "A",
2: "B",
3: "C",
}
interface Cat {
id: number;
name: string;
age: number;
}
function isValid(cat: Cat) {
const result: Record<keyof Cat, boolean> = {
id: cat.id > 0,
name: cat.name !== "",
age: cat.age > 0,
}
return result
}
// Pick<T, K>
interface Userr {
id: number;
name: string;
age: number;
gender: "m" | "f"
}
// Pick : 유저r에서 id와 name만을 가져와 사용
const pAdminn: Pick<Userr, "id" | "name"> = {
id: 0,
name: "kkaka"
}
// Omit<T, K> : 특정 프로퍼티를 생략하고 쓸 수 있음
const oAdmin: Omit<Userr, "age" | "gender"> = {
id: 0,
name: "kkaka"
}
// Exclude<T1, T2> : 타입1에서 타입2를 제외하고 쓸 수 있음(프로퍼티 생략 X)
type T1 = string | number;
type T2 = Exclude<T1, number>
// NonNullable<Type> : null이나 undefinde를 제외
type T3 = string | void | null | undefined
type T4 = NonNullable<T3>
Author And Source
이 문제에 관하여([TS] 타입스크립트 기초), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@sominpark/TS-타입스크립트-기초-x2fkq0a2
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
function add(num1: number, num2: number) : void {
console.log(num1 + num2)
}
function show1 (arr: number[]) {
arr.forEach(el => console.log(el))
}
function show2 (arr: Array<number>) {
arr.forEach(el => console.log(el))
}
type Score = "A" | "B" | "C" | "d"
interface User {
name : string;
age : number;
gender? : string; // 옵션값
readonly birthYear : number;
[grade:number] : Score // 타입을 지정한 스코어를 쓰겠다
}
let user : User = {
name : "somin",
age: 26,
birthYear : 1996,
1 : 'A',
}
user.gender = 'female' // 옵션값이므로 나중에 추가 가능
interface Add {
(num1 : number, num2: number) : number;
}
const add2 : Add = function (x, y) {
return x + y
}
interface IsAdult {
(age:number) : boolean
}
const a : IsAdult = (age) => {
return age > 19;
}
a(26) // true
interface Car {
color : string;
wheels: number;
start() : void;
}
class Bmw implements Car {
color = "red";
wheels = 4;
start() {
console.log("gogogo")
}
}
class Bmw2 implements Car {
color;
wheels = 4;
start() {
console.log("gogogo")
}
constructor (c : string) {
this.color = c
}
}
const b = new Bmw2("green")
interface Benz extends Car {
door : number,
stop () : void
}
class benz implements Benz {
color = "red";
wheels = 4;
start() {
console.log("gogogo")
}
door = 5;
stop(){
console.log("stopstop")
}
}
interface Toy {
nema : string;
}
interface ToyCar extends Car, Toy {
price : number
}
3. 함수
function hello(name? : string) { // 물음표는 옵셔널
return `hello, ${name} || "world`
}
const result = hello()
function hello2(name = "world") { // 물음표는 옵셔널
return `hello, ${name}`
}
function add3(...nums: number[]) {
return nums.reduce((result, num) => result + num, 0)
}
interface User1 {
name : string;
}
const Sam: User1 = {
name : 'sam'
}
function showName(this:User1) {
console.log(this.name)
}
const a1 = showName.bind(Sam);
a1();
interface User2 {
name: string;
age: number;
}
// 전달받은 매개변수의 타입에 따라 결과가 달라지는 경우 오버로드 사용(위 2개)
function join(name: string, age: number ) : User2
function join(name: string, age: string ) : string
function join(name: string, age: number | string): User2 | string{
if(typeof age === "number") {
return {
name,
age,
}
} else {
return "나이는 숫자로 입력해 주세요"
}
}
const sam: User2 = join("sam", 26)
const jane: string = join("sam", "26")
4. 리터럴, 유니온(|), 교차 타입
// 리터럴, 유니온(|) 타입
const userName1 = "bob"
let userName2 = "tom"
type Job = "police" | "developer" | "teacher";
interface User3 {
name : string;
job : Job;
}
const user4 : User3 = {
name : "bob",
job : "police",
}
interface Computer {
name: "computer";
color : string;
start() : void;
}
interface Mobile {
name: "mobile";
color : string;
call() : void;
}
const getGift = (gift: Computer | Mobile) => {
console.log(gift.color);
if(gift.name === "computer") {
gift.start()
} else {
gift.call()
}
}
// 교차 타입 : 여러 타입을 합쳐서 사용
interface Car2 {
name : string;
start() : void;
}
interface Toy2 {
name : string;
color : string;
price : number;
}
const toyCar : Toy2 & Car2 = {
name : "타요",
start(){
console.log("goooo")
},
color: "blue",
price: 20000,
}
6. 클래스
class Car {
// color : string;
// 위에처럼 명시해주지 않아도 아래처럼 public이나 readonly를 적어줄 수 있음
constructor( color : string) {
this.color = color;
}
static start() {
console.log("go")
}
}
// 접근 제한자
// public(디폴트값) : 자식 클래스(class Bmw extends Car)에서는 접근 가능, 클래스 인스턴스(new Bmw)에서는 참조 가능
// private(#을 붙여 표현하기도) : 자식 클래스에서는 접근 불가, 해당 클래스 내부에서만 접근 가능
// protected : 자식 클래스에서는 접근 가능하나 클래스 인스턴스에서는 참조 불가
// readonly : 읽기 전용 프로퍼티
// static으로 선언된 프로퍼티의 경우 this로 접근하는 것이 아닌 클래스 명으로 접근헤야 함
// 추상 클래스 : abstrat 를 적어줌 > new로 클래스 인스턴스를 만들어낼 수 없음
// 추상 클래스 내부에 추상 메소드는 상속받은 쪽에서 구체적 구현을 해줘야 함
7. 제네릭
// 제네릭 미사용
function getSize(arr : number[] | string[]) : number {
return arr.length
}
const arr1 = [1, 2, 3]
getSize(arr1)
const arr2 = ["a", "b", "c"]
getSize(arr2)
// 제네릭 사용
// <T> : 타입 파라미터 (일반적으로 T를 쓰는 것일 뿐)
function getSize1<T>(arr : T[]) : number {
return arr.length
}
getSize1<number>(arr1)
getSize1<string>(arr2)
interface Phone<T> {
name: string;
price: number;
option: T;
}
const p1: Phone<object> = {
name: "13",
price: 1000000,
option : {
color : "white",
coupon : false,
}
}
const p2: Phone<string> = {
name: "12",
price: 800000,
option : "old",
}
interface A {
name : string;
age : number;
}
interface B {
name : string;
color : string;
}
interface C {
price : number;
}
const aaa : A = {name: "aaa", age: 10}
const bbb : B = {name: "aaa", color: "red"}
const ccc : C = { price: 10}
function showName3 <T extends {name : string}>(data:T): string {
return data.name
}
showName3(aaa) // "aaa"
showName3(bbb) // "bbb"
// showName3(ccc) : 이름이 없어 에러
8. 유틸리티 타입
// 유틸리티 타입
interface User5 {
id: number;
name: string;
age: number;
gender?: "m" | "f"
}
// keyof
type UserKey = keyof User5; // "id" | "name" | "age" | "gender"
const uk:UserKey = "id"
// Partial<T> : 프로퍼티를 모두 옵셔널로 바꿔줌
// interface User5 {
// id?: number;
// name?: string;
// age?: number;
// gender?: "m" | "f"
// }
let admin:Partial<User5> = {
id: 1,
name: "kkakka"
}
// Required<T> : 프로퍼티를 모두 필수로 바꿔줌
let admin2:Required<User5> = {
id: 1,
age: 26,
name: "kkakka",
gender: "f"
}
// Readonly<T> : 프로퍼티를 읽기 전용으로 바꿔줌(값을 바꿀 수 없음)
// Record<K, T>
interface Score2 {
"1": "A" | "B" | "C";
"2": "A" | "B" | "C";
"3": "A" | "B" | "C";
}
const score1: Score2 = {
1: "A",
2: "B",
3: "C",
}
const score2: Record<"1"|"2"|"3", "A" | "B" | "C"> = {
1: "A",
2: "B",
3: "C",
}
type Grade3 = "1"|"2"|"3"
type Score3 = "A" | "B" | "C"
const score3: Record<Grade3, Score3> = {
1: "A",
2: "B",
3: "C",
}
interface Cat {
id: number;
name: string;
age: number;
}
function isValid(cat: Cat) {
const result: Record<keyof Cat, boolean> = {
id: cat.id > 0,
name: cat.name !== "",
age: cat.age > 0,
}
return result
}
// Pick<T, K>
interface Userr {
id: number;
name: string;
age: number;
gender: "m" | "f"
}
// Pick : 유저r에서 id와 name만을 가져와 사용
const pAdminn: Pick<Userr, "id" | "name"> = {
id: 0,
name: "kkaka"
}
// Omit<T, K> : 특정 프로퍼티를 생략하고 쓸 수 있음
const oAdmin: Omit<Userr, "age" | "gender"> = {
id: 0,
name: "kkaka"
}
// Exclude<T1, T2> : 타입1에서 타입2를 제외하고 쓸 수 있음(프로퍼티 생략 X)
type T1 = string | number;
type T2 = Exclude<T1, number>
// NonNullable<Type> : null이나 undefinde를 제외
type T3 = string | void | null | undefined
type T4 = NonNullable<T3>
Author And Source
이 문제에 관하여([TS] 타입스크립트 기초), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@sominpark/TS-타입스크립트-기초-x2fkq0a2
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
function hello(name? : string) { // 물음표는 옵셔널
return `hello, ${name} || "world`
}
const result = hello()
function hello2(name = "world") { // 물음표는 옵셔널
return `hello, ${name}`
}
function add3(...nums: number[]) {
return nums.reduce((result, num) => result + num, 0)
}
interface User1 {
name : string;
}
const Sam: User1 = {
name : 'sam'
}
function showName(this:User1) {
console.log(this.name)
}
const a1 = showName.bind(Sam);
a1();
interface User2 {
name: string;
age: number;
}
// 전달받은 매개변수의 타입에 따라 결과가 달라지는 경우 오버로드 사용(위 2개)
function join(name: string, age: number ) : User2
function join(name: string, age: string ) : string
function join(name: string, age: number | string): User2 | string{
if(typeof age === "number") {
return {
name,
age,
}
} else {
return "나이는 숫자로 입력해 주세요"
}
}
const sam: User2 = join("sam", 26)
const jane: string = join("sam", "26")
// 리터럴, 유니온(|) 타입
const userName1 = "bob"
let userName2 = "tom"
type Job = "police" | "developer" | "teacher";
interface User3 {
name : string;
job : Job;
}
const user4 : User3 = {
name : "bob",
job : "police",
}
interface Computer {
name: "computer";
color : string;
start() : void;
}
interface Mobile {
name: "mobile";
color : string;
call() : void;
}
const getGift = (gift: Computer | Mobile) => {
console.log(gift.color);
if(gift.name === "computer") {
gift.start()
} else {
gift.call()
}
}
// 교차 타입 : 여러 타입을 합쳐서 사용
interface Car2 {
name : string;
start() : void;
}
interface Toy2 {
name : string;
color : string;
price : number;
}
const toyCar : Toy2 & Car2 = {
name : "타요",
start(){
console.log("goooo")
},
color: "blue",
price: 20000,
}
6. 클래스
class Car {
// color : string;
// 위에처럼 명시해주지 않아도 아래처럼 public이나 readonly를 적어줄 수 있음
constructor( color : string) {
this.color = color;
}
static start() {
console.log("go")
}
}
// 접근 제한자
// public(디폴트값) : 자식 클래스(class Bmw extends Car)에서는 접근 가능, 클래스 인스턴스(new Bmw)에서는 참조 가능
// private(#을 붙여 표현하기도) : 자식 클래스에서는 접근 불가, 해당 클래스 내부에서만 접근 가능
// protected : 자식 클래스에서는 접근 가능하나 클래스 인스턴스에서는 참조 불가
// readonly : 읽기 전용 프로퍼티
// static으로 선언된 프로퍼티의 경우 this로 접근하는 것이 아닌 클래스 명으로 접근헤야 함
// 추상 클래스 : abstrat 를 적어줌 > new로 클래스 인스턴스를 만들어낼 수 없음
// 추상 클래스 내부에 추상 메소드는 상속받은 쪽에서 구체적 구현을 해줘야 함
7. 제네릭
// 제네릭 미사용
function getSize(arr : number[] | string[]) : number {
return arr.length
}
const arr1 = [1, 2, 3]
getSize(arr1)
const arr2 = ["a", "b", "c"]
getSize(arr2)
// 제네릭 사용
// <T> : 타입 파라미터 (일반적으로 T를 쓰는 것일 뿐)
function getSize1<T>(arr : T[]) : number {
return arr.length
}
getSize1<number>(arr1)
getSize1<string>(arr2)
interface Phone<T> {
name: string;
price: number;
option: T;
}
const p1: Phone<object> = {
name: "13",
price: 1000000,
option : {
color : "white",
coupon : false,
}
}
const p2: Phone<string> = {
name: "12",
price: 800000,
option : "old",
}
interface A {
name : string;
age : number;
}
interface B {
name : string;
color : string;
}
interface C {
price : number;
}
const aaa : A = {name: "aaa", age: 10}
const bbb : B = {name: "aaa", color: "red"}
const ccc : C = { price: 10}
function showName3 <T extends {name : string}>(data:T): string {
return data.name
}
showName3(aaa) // "aaa"
showName3(bbb) // "bbb"
// showName3(ccc) : 이름이 없어 에러
8. 유틸리티 타입
// 유틸리티 타입
interface User5 {
id: number;
name: string;
age: number;
gender?: "m" | "f"
}
// keyof
type UserKey = keyof User5; // "id" | "name" | "age" | "gender"
const uk:UserKey = "id"
// Partial<T> : 프로퍼티를 모두 옵셔널로 바꿔줌
// interface User5 {
// id?: number;
// name?: string;
// age?: number;
// gender?: "m" | "f"
// }
let admin:Partial<User5> = {
id: 1,
name: "kkakka"
}
// Required<T> : 프로퍼티를 모두 필수로 바꿔줌
let admin2:Required<User5> = {
id: 1,
age: 26,
name: "kkakka",
gender: "f"
}
// Readonly<T> : 프로퍼티를 읽기 전용으로 바꿔줌(값을 바꿀 수 없음)
// Record<K, T>
interface Score2 {
"1": "A" | "B" | "C";
"2": "A" | "B" | "C";
"3": "A" | "B" | "C";
}
const score1: Score2 = {
1: "A",
2: "B",
3: "C",
}
const score2: Record<"1"|"2"|"3", "A" | "B" | "C"> = {
1: "A",
2: "B",
3: "C",
}
type Grade3 = "1"|"2"|"3"
type Score3 = "A" | "B" | "C"
const score3: Record<Grade3, Score3> = {
1: "A",
2: "B",
3: "C",
}
interface Cat {
id: number;
name: string;
age: number;
}
function isValid(cat: Cat) {
const result: Record<keyof Cat, boolean> = {
id: cat.id > 0,
name: cat.name !== "",
age: cat.age > 0,
}
return result
}
// Pick<T, K>
interface Userr {
id: number;
name: string;
age: number;
gender: "m" | "f"
}
// Pick : 유저r에서 id와 name만을 가져와 사용
const pAdminn: Pick<Userr, "id" | "name"> = {
id: 0,
name: "kkaka"
}
// Omit<T, K> : 특정 프로퍼티를 생략하고 쓸 수 있음
const oAdmin: Omit<Userr, "age" | "gender"> = {
id: 0,
name: "kkaka"
}
// Exclude<T1, T2> : 타입1에서 타입2를 제외하고 쓸 수 있음(프로퍼티 생략 X)
type T1 = string | number;
type T2 = Exclude<T1, number>
// NonNullable<Type> : null이나 undefinde를 제외
type T3 = string | void | null | undefined
type T4 = NonNullable<T3>
Author And Source
이 문제에 관하여([TS] 타입스크립트 기초), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@sominpark/TS-타입스크립트-기초-x2fkq0a2
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
class Car {
// color : string;
// 위에처럼 명시해주지 않아도 아래처럼 public이나 readonly를 적어줄 수 있음
constructor( color : string) {
this.color = color;
}
static start() {
console.log("go")
}
}
// 접근 제한자
// public(디폴트값) : 자식 클래스(class Bmw extends Car)에서는 접근 가능, 클래스 인스턴스(new Bmw)에서는 참조 가능
// private(#을 붙여 표현하기도) : 자식 클래스에서는 접근 불가, 해당 클래스 내부에서만 접근 가능
// protected : 자식 클래스에서는 접근 가능하나 클래스 인스턴스에서는 참조 불가
// readonly : 읽기 전용 프로퍼티
// static으로 선언된 프로퍼티의 경우 this로 접근하는 것이 아닌 클래스 명으로 접근헤야 함
// 추상 클래스 : abstrat 를 적어줌 > new로 클래스 인스턴스를 만들어낼 수 없음
// 추상 클래스 내부에 추상 메소드는 상속받은 쪽에서 구체적 구현을 해줘야 함
// 제네릭 미사용
function getSize(arr : number[] | string[]) : number {
return arr.length
}
const arr1 = [1, 2, 3]
getSize(arr1)
const arr2 = ["a", "b", "c"]
getSize(arr2)
// 제네릭 사용
// <T> : 타입 파라미터 (일반적으로 T를 쓰는 것일 뿐)
function getSize1<T>(arr : T[]) : number {
return arr.length
}
getSize1<number>(arr1)
getSize1<string>(arr2)
interface Phone<T> {
name: string;
price: number;
option: T;
}
const p1: Phone<object> = {
name: "13",
price: 1000000,
option : {
color : "white",
coupon : false,
}
}
const p2: Phone<string> = {
name: "12",
price: 800000,
option : "old",
}
interface A {
name : string;
age : number;
}
interface B {
name : string;
color : string;
}
interface C {
price : number;
}
const aaa : A = {name: "aaa", age: 10}
const bbb : B = {name: "aaa", color: "red"}
const ccc : C = { price: 10}
function showName3 <T extends {name : string}>(data:T): string {
return data.name
}
showName3(aaa) // "aaa"
showName3(bbb) // "bbb"
// showName3(ccc) : 이름이 없어 에러
8. 유틸리티 타입
// 유틸리티 타입
interface User5 {
id: number;
name: string;
age: number;
gender?: "m" | "f"
}
// keyof
type UserKey = keyof User5; // "id" | "name" | "age" | "gender"
const uk:UserKey = "id"
// Partial<T> : 프로퍼티를 모두 옵셔널로 바꿔줌
// interface User5 {
// id?: number;
// name?: string;
// age?: number;
// gender?: "m" | "f"
// }
let admin:Partial<User5> = {
id: 1,
name: "kkakka"
}
// Required<T> : 프로퍼티를 모두 필수로 바꿔줌
let admin2:Required<User5> = {
id: 1,
age: 26,
name: "kkakka",
gender: "f"
}
// Readonly<T> : 프로퍼티를 읽기 전용으로 바꿔줌(값을 바꿀 수 없음)
// Record<K, T>
interface Score2 {
"1": "A" | "B" | "C";
"2": "A" | "B" | "C";
"3": "A" | "B" | "C";
}
const score1: Score2 = {
1: "A",
2: "B",
3: "C",
}
const score2: Record<"1"|"2"|"3", "A" | "B" | "C"> = {
1: "A",
2: "B",
3: "C",
}
type Grade3 = "1"|"2"|"3"
type Score3 = "A" | "B" | "C"
const score3: Record<Grade3, Score3> = {
1: "A",
2: "B",
3: "C",
}
interface Cat {
id: number;
name: string;
age: number;
}
function isValid(cat: Cat) {
const result: Record<keyof Cat, boolean> = {
id: cat.id > 0,
name: cat.name !== "",
age: cat.age > 0,
}
return result
}
// Pick<T, K>
interface Userr {
id: number;
name: string;
age: number;
gender: "m" | "f"
}
// Pick : 유저r에서 id와 name만을 가져와 사용
const pAdminn: Pick<Userr, "id" | "name"> = {
id: 0,
name: "kkaka"
}
// Omit<T, K> : 특정 프로퍼티를 생략하고 쓸 수 있음
const oAdmin: Omit<Userr, "age" | "gender"> = {
id: 0,
name: "kkaka"
}
// Exclude<T1, T2> : 타입1에서 타입2를 제외하고 쓸 수 있음(프로퍼티 생략 X)
type T1 = string | number;
type T2 = Exclude<T1, number>
// NonNullable<Type> : null이나 undefinde를 제외
type T3 = string | void | null | undefined
type T4 = NonNullable<T3>
Author And Source
이 문제에 관하여([TS] 타입스크립트 기초), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@sominpark/TS-타입스크립트-기초-x2fkq0a2
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
// 유틸리티 타입
interface User5 {
id: number;
name: string;
age: number;
gender?: "m" | "f"
}
// keyof
type UserKey = keyof User5; // "id" | "name" | "age" | "gender"
const uk:UserKey = "id"
// Partial<T> : 프로퍼티를 모두 옵셔널로 바꿔줌
// interface User5 {
// id?: number;
// name?: string;
// age?: number;
// gender?: "m" | "f"
// }
let admin:Partial<User5> = {
id: 1,
name: "kkakka"
}
// Required<T> : 프로퍼티를 모두 필수로 바꿔줌
let admin2:Required<User5> = {
id: 1,
age: 26,
name: "kkakka",
gender: "f"
}
// Readonly<T> : 프로퍼티를 읽기 전용으로 바꿔줌(값을 바꿀 수 없음)
// Record<K, T>
interface Score2 {
"1": "A" | "B" | "C";
"2": "A" | "B" | "C";
"3": "A" | "B" | "C";
}
const score1: Score2 = {
1: "A",
2: "B",
3: "C",
}
const score2: Record<"1"|"2"|"3", "A" | "B" | "C"> = {
1: "A",
2: "B",
3: "C",
}
type Grade3 = "1"|"2"|"3"
type Score3 = "A" | "B" | "C"
const score3: Record<Grade3, Score3> = {
1: "A",
2: "B",
3: "C",
}
interface Cat {
id: number;
name: string;
age: number;
}
function isValid(cat: Cat) {
const result: Record<keyof Cat, boolean> = {
id: cat.id > 0,
name: cat.name !== "",
age: cat.age > 0,
}
return result
}
// Pick<T, K>
interface Userr {
id: number;
name: string;
age: number;
gender: "m" | "f"
}
// Pick : 유저r에서 id와 name만을 가져와 사용
const pAdminn: Pick<Userr, "id" | "name"> = {
id: 0,
name: "kkaka"
}
// Omit<T, K> : 특정 프로퍼티를 생략하고 쓸 수 있음
const oAdmin: Omit<Userr, "age" | "gender"> = {
id: 0,
name: "kkaka"
}
// Exclude<T1, T2> : 타입1에서 타입2를 제외하고 쓸 수 있음(프로퍼티 생략 X)
type T1 = string | number;
type T2 = Exclude<T1, number>
// NonNullable<Type> : null이나 undefinde를 제외
type T3 = string | void | null | undefined
type T4 = NonNullable<T3>
Author And Source
이 문제에 관하여([TS] 타입스크립트 기초), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sominpark/TS-타입스크립트-기초-x2fkq0a2저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)