TypeScript 기초

타입 지정

let testNum: number = 11;
testNum = 456;
console.log(testNum); // 456

배열 자료와 타입지정

let testAray: string[] = [];
testAray = ['arr1', 'arr2'];
console.log(testAray); // ['arr1', 'arr2']

오브젝트 자료와 타입지정

name뒤에 ?를 붙이면 name 이라는 속성이 들어올 수도 있고 안 들어올 수도 있다는 의미 (옵션)

let testObj: { name?: string } = { name: 'kim' };
testObj = { name: 'lee' };
console.log(testObj); // {name: 'lee'}

Union type - 다양한 타입 설정

타입을 두개 혹은 그 이상을 합쳐서 새로운 타입을 만들어 낸다.
string이 가득담긴 array 혹은 숫자가 들어올 수 있다는 의미

let multiName: string[] | number = 123;
multiName = ['sum'];
multiName = 123;
console.log(multiName);

let 회원: number | string | boolean = '셋중아무거나';
회원; // 1)
회원 = 123; //2) 

1) 확인해보면 string 타입으로 고정되어있지만
2) 다시 넘버를 부여하면 가변적으로 변한다.

type은 변수에 담아서 쓸 수 있다

type MyType = string | number;
let typeTest: MyType = 888;
console.log(typeTest);

함수에 type 지정도 가능하다

function func(x: number): number {
  return x * 2;
}
console.log(func(12));

• 타입이 지정된 파라미터는 필수이다.
• 파라미터가 옵션일 경우
  • 함수의 파라미터 파라미터변수?:타입
  • 객체의 경우 {age?:number}

function 함수(x: number): void {
  1 + 1;
}

• 리턴이 없을 경우 void 를 사용
• 만약 리턴이 있을경우 에러를 낸다

array에 쓸 수 있는 typle 타입

type MemberArr = [number, boolean];
let seul: MemberArr = [23, true];

obj에 타입 지정할 속성이 많을 경우

type MemberObj1 = {
  name: string;
};
let lee1: MemberObj1 = {
  name: 'test',
};
console.log(lee1);

type MemberObj2 = {
  // 모든 Obj 속성 : ~~~   => string으로 들어오는 모든 obj속성의 타입은 number
  [key: string]: number;
};
let lee2: MemberObj2 = {
  aaa: 123,
  bbb: 456,
  // ggg: 'number 타입만 올 수 있다! 문자열 넣으면 에러',
};
console.log(lee2);

class 타입지정

class User {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

any & unknown

: 아무타입이나 넣을 수 있다.

// let 이름1: any;
let 이름1: unknown;
이름1 = 123;
이름1 = {};

let 변수1: string = 이름1; // 1) 
이름1 - 2; // 2) 

• unknown 타입이 더 안전한 이유는 1),2) 에서 에러를 발생시키기 때문이다. any 타입은 에러가 나지 않는다.
• any는 변수 타입체크 해제기능 용도로 쓰일 수 있다.🤔 타입관련 버그가 생길 경우 왜 그런지 추적하기가 어려우므로 남용하지 않도록 하자.
• unkonwn 타입 :
  1. unknown 타입엔 모든 자료 다 집어넣을 수 있음
  2. 자료집어넣어도 타입은 그대로 unknown
  • 어떤 타입을 지정해줄지 모를때 약간 안정성을 주고 싶다면 unknown 타입으로 미리 지정할 수 있다.

연산시 타입이 맞아야 한다.

• 타입을 엄격하게 지키므로 간단한 수학연산도 타입이 맞아야 한다.

let 나이: string | number; //1)
나이 + 1; // string 또는 number 라는 새로운 '타입'이므로 허용되지 않음
string 타입 +1 (ok)
number 타입 +1 (ok)
string | number 타입 +1 (no)

let 나이2: unknown = 1; 
나이 - 1; // 2)

• 1) union type은 새로운 타입을 하나 만든 것. 즉 number 타입이 아니므로
• 2) 숫자가 들어가있지만 여전히 unknown 타입이므로 에러가 난다.

// 넘버스트링 유니온 + 문자
function myFunc3(x: number | string): void {
  console.log(x + '문자');
}
myFunc3(1);

// 넘버스트링 유니온 + 문자
function myFunc3(x: number | string): void {
  console.log(x + '문자');
}
myFunc3('문자문자');

// 넘버스트링 유니온 + 넘버 
function myFunc3(x: number | string): void {
  console.log(x + 3); // 에러
}
myFunc3(1);

// 넘버스트링 유니온 + 넘버 
function myFunc3(x: number | string): void {
  console.log(x + 3); // 에러
}
myFunc3('문자문자');

타입 지정 예시

let user: string = 'kim';
let age: undefined | number = undefined;
let married: boolean = false;
let 철수: (string | number | undefined | boolean)[] = [user, age, married];

let 학교: {
  score: (number | boolean)[];
  teacher: string;
  friend: string | string[];
} = {
  score: [100, 97, 84],
  teacher: 'Phil',
  friend: 'John',
};
학교.score[4] = false;
학교.friend = ['Lee', 학교.teacher];

?연산자

// 1)
function myFunc(x?: number): void {
  console.log(x)
}

// 2)
function myFunc(x: number | undefined): void {
  console.log(x)
}

1) 변수 ?: number는
2) 변수:number|undefined와 같다
JS에서 myFunc() 를 하면 x라는 파라미터는 저절로 undefined가 된다.