.gif&blockId=11b00c82-b138-8050-a58b-dcbceda2ef8f)
타입 명시
let a = "hello"; // 타입 추론으로 형 명시
let b : boolean = false; // 타입을 명시적으로 명시, 비추
let c : number[] = []; // 숫자형 배열 선언, 이런식으로 추론 불가일때 명시 표현
TypeScript
복사
타입
모든 객체가 name요소 존재, 몇 명만 age요소가 존재할 때
// 객체의 형 명시
const player : {
name:string,
age?:number // ?를 붙이면 undefined일 수도 있음 명시
} = {
name:"Honey"
}
if(player.age && player.age < 10) { //age가 undefined일수도 있기 때문에 보호장치
}
TypeScript
복사
더 나은 코드, 별칭 생성
type Player = { //첫 글자는 대문자
name:string,
age?:number
}
const honey : Player = {
name:"Honey"
}
const bee : Player = {
name:"bee",
age:12
}
//타입에도 별칭 사용 가능
type Age = number; // number대신 Age 사용 가능, 과한 사용 비추
TypeScript
복사
함수 객체 반환
type Player = {
name:string,
age?:number
}
function playerMaker(name:string) : Player { // 매개변수 형 지정, 리턴형 지정(Player 타입)
return {
name // == name:name, 매개변수 와 같은 이름이면 :name 생략 가능
}
}
const honey = playerMaker("honey");
honey.age = 12;
// 화살표 함수
const playerMaker = (name:string) : Player => ({name})
TypeScript
복사
객체
object는 원시 타입이 아닌 타입을 나타냅니다. 예를 들어, number, string, boolean, bigint, symbol, null, 또는 undefined 가 아닌 나머지를 의미
declare function create(o: object | null): void;
create({ prop: 0 }); // 성공
create(null); // 성공
create(42); // 오류
create("string"); // 오류
create(false); // 오류
create(undefined); // 오류
TypeScript
복사
readonly 앞선언
readonly로 선언하면 값 변경 불가
type Player = {
readonly name : string, // name을 readonly로
age ?: number
}
const playerMaker(name:string) : Player => ({name}) //return하는 값이 Player라고 전달
const honey = plyaerMaker("niko");
honey.name = "eee"; // Error
const numbers : readonly number[] = [1, 2, 3, 4];
numbers.push(1); // Error : push라는 것이 readonly number[]타입에 존재X
TypeScript
복사
키 값 형식 지정
type Word = {
[key: number]: string
}
let words = {
"string" : "hello", //Ok
1 : "by" // Error, (원래 에러 였으나 1을 스트링 형으로 처리하는 거 같음)
}
TypeScript
복사
Tuple
정해진 개수와 순서에 따라 배열 선언
const player:[string, number, boolean] = ["honey", 1, true];
player[0] = 1; //Error
const player2: readonly[string, number, boolean] = ["honey", 1, true];
player2[0] = "honey"; //Error
TypeScript
복사
열거(Enum)
enum Color {Red, Green, Blue} //자동 0,1,2
enum Color {Red = 1, Green, Blue} //직접 번호 매기기1,2,3
enum Color {Red = 1, Green = 2, Blue = 4} //모두 수동 1,2,4
let c: Color = Color.Green;
let colorName: string = Color[2];
console.log(colorName); // 값이 2인 'Green'이 출력
TypeScript
복사
undefined, null, any
undefined, null
let a : undefined = undefined;
let b : null = null;
TypeScript
복사
any = Javascript
•
Typescreipt로 부터 벗어날수 있음
•
가급적 사용 자제
•
모든 형이 들어갈 수 있음
const a : any[] = [1, 2, 3, 4];
const b : any = true;
a + b; // OK
TypeScript
복사
void <=> any
•
아무것도 return 하지 않는 함수에서 반환 자료형
•
사용 빈도 적음
•
명시할 필요 없음
function hello() : void { // 생략 가능
console.log('x');
}
TypeScript
복사
function hello() : void { // :void 생략 가능
console.log('x');
}
const a = hello();
a.toUpperCase(); //Error : void는 toUpperCase를 지원하지 않는다.
TypeScript
복사
unknown
•
형식을 알지 못할 때 사용
•
API에서 리턴 형을 모를 때 등
•
if문을 통해 형 유추가 가능하게 코딩해야함
let a : unknown;
if (typeof a === 'number') {
let b = a + 1;
}
if (typeof a === 'string') {
let b = a.toUpperCase();
}
let b = a + 1; // Error
TypeScript
복사
never
•
함수가 절대 return 하지 않을 때 발생
◦
예외 처리
◦
함수 리턴형이 여러개 일 때
•
사용 빈도가 매우 적음
// Exception
function hello():never {
throw new Error("xxxx"); // return하지 않고 오류를 발생
}
// 리턴형 여러개
function hello(name:string|number) {
if(typeof name === "string") {
name; // string
} else if (typeof name === "number") {
name; // number
} else {
name; // never
}
}
TypeScript
복사
특정 값 지정
type Team = "red" | "blue" | "yellow"
type Health = 1 | 3 | 5
type Player = {
nickname: string,
team: Team,
health: Health
{
const honey: Player = {
nickname: "hon2yb22",
team: "blue", // red, blue, yellow 중 하나만 가능
health: 5 // 1, 3, 5 중 가능
}
TypeScript
복사
타입 단언
컴파일러에게 신뢰를 주는 방법
angle-bracket
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
TypeScript
복사
as
jsx와 함께 사용될 경우는 as만 허용
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;
TypeScript
복사
