Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- You are running `create-react-app` 5.0.0
- 회고
- 구름톤
- which is behind the latest release (5.0.1).
- Til
- create-react-app오류
- TypeScript
Archives
- Today
- Total
비전공 프론트엔드 개발자
TypeScript의 기초 개념 본문
1. 타입 추론 ( Type inference )
let course = ' react-type-script ' => 문자열
course = 1234 => 숫자열
course 는 타입을 지정해 주지않아도 선언된 시점에 문자열로 지정이 된다.
( 매번 타입을 지정해주는건 상당히 귀찮은 행동이다. )
숫자열을 재할당을 하게 될 경우 에러가 발생한다.
( 결론. 타입을 지정하지 않아도 타입스크립트는 할당된 값에 따라 타입을 자동으로 지정해준다. )
2. 유니온 타입
변수를 선언할 때 하나의 타입만 사용하지 않고, 여러 타입을 혼용하게 될 때가 있다.
let exampleType : number | string = ' This is union type '
-> 문자타입과 숫자타입 모두 사용 가능. ( 현재 문자타입 )
exampleType = 1234
( 정상 작동 )
let names = string | string[]
이런식으로도 가능
3. 타입별칭 ( Type aliases )
타입은 인스턴스방식으로 생성하여 재사용성을 높여주는 타입스크립트만의 방식.
type Person = {
name: string;
age: number;
married: boolean;
friend: boolean;
message: string;
};
방법 : type 원하는 이름 = 타입
예시.
let jade: Person | string;
// 타입을 위에서 선언했던 Person 혹은 string으로 선언.
jade = { // Person 타입에 맞는 값을 선언
name: "jade",
age: 29,
married: true,
friend: true,
message: "hello",
};
let jun: Person[]; // 타입을 배열 Person로 선언.
jun = [
{
name: "jun",
age: 30,
married: false,
friend: true,
message: `hello i'm jun`,
},
];
// 배열안에 0번째 인덱스로 Person 타입의 객체가 있음.
4. function & type
기초
function add(a: number, b: number): number {
return a + b;
}
매개변수로 a와 b를 받는데 둘다 숫자타입으로 지정했다.
매개변수 우측 number 는 반환값이 숫자형이라는 말이다.
function printOutPut(value: any) {
console.log(value);
// return undefined;
}
printOutPut 함수는 반환값이 없다. 이런 경우 해당 함수의 타입은 void 이다.
void 는 함수에만 있는 특별한 경우로, null 혹은 undefined 와 비슷하다. 특이점으로는 항상 함수와 결합하여 사용해야 한다는 것이다.
만약 함수의 반환값이 필요한 경우 null 혹은 undefined 를 반환해 주면 된다.
'TypeScript' 카테고리의 다른 글
TypeScript의 기초 개념2 (0) | 2022.10.24 |
---|---|
typescript 기초 문법정리 (2) | 2022.10.23 |