타입스크립트 코드 테스트
https://www.typescriptlang.org/play
타입스크립트 핸드북
https://typescript-kr.github.io/pages/basic-types.html
TypeScript는 JavaScript에 추가적인 구문을 추가하여 editor와의 단단한 통합을 지원합니다. editor에서 초기에 오류를 잡을 수 있습니다.
TypeScript 코드는 JavaScript가 실행되는 모든 곳(브라우저, Node.js 또는 Deno 및 앱 등)에서 JavaScript로 변환될 수 있습니다.
TypeScript는 JavaScript를 이해하고 타입 추론(type inference)을 사용하여 추가 코드 없이도 훌륭한 도구를 제공합니다.
컴파일은 그저 작성한 타입스크립트 코드를 일반적인 자바스크립트로 바꿔주는 것이다.
function divide(a, b){
return a /b;
}
divide("hello");
Errors
Parameter 'a' implicitly has an 'any' type.
Parameter 'b' implicitly has an 'any' type.
Expected 2 arguments, but got 1.
const player = {
age: 12
}
player.age = false
Error
Type 'boolean' is not assignable to type 'number'.
let a = "hello" // let a: string
a = "bye" // no error
a = 1; // error: Type 'number' is not assignable to type 'string'.
let b : boolean = "x";
// error: Type 'string' is not assignable to type 'boolean'.
let c : boolean = false // no error
let d : number[] = [] // number's array
let a : number = 1;
let b : string = "1";
let c : boolean = true;
Array
let a : number[] = [1, 2];
let b : string[] = ["1", "2"];
let c : boolean[] = [true];
const player :{
name: string;
age?: number; // number || undefined
} = {
name: 'huisu'
}
if (player.age && player.age < 10 ){
console.log("hi");
}
type Player = {
name: string;
age?: number;
} // Alias
const nico : Player = {
name: "nico"
}
const soo : Player = {
name: 'huisu',
age: 31
}
type Age = number;
type Name = string;
type Player = {
name: string;
age?: Age;
}
function 사용법
type Player = {
name: string;
age?: Age;
}
// argument : type
function playerMaker(name:string) : Player {
return {
name
}
}
arrow function
const playerMaker = (name: string) : Player => ({name})
const soo = playerMaker('huisu');
soo.age = 31;
type Player = {
readonly name: string;
age?: Age;
}
const playerMaker = (name: string) : Player => ({name})
const soo = playerMaker('huisu');
soo.name = 'janhun' // error
// Cannot assign to 'name' because it is a read-only property.
const numbers: readonly number[] = [1, 2, 3]
numbers.push(4) // error
//Property 'push' does not exist on type 'readonly number[]'.
const
를 사용 readonly
를 사용number
, string
이 쌍으로 있는 값을 표현하고 싶을 때 사용// 갯수, type의 순서 모두 일치 해야한다.
const player: [string, number, boolean] = ['soo', 31, true]
player[0] = 1; // error
// 읽기 전용도 같이 사용 가능
const player: readonly [string, number, boolean] = ['soo', 31, true]
undefined
과 null
둘 다 각각 자신의 타입 이름으로 undefined
, null
로 사용한다void
처럼 그 자체로 유용한 경우는 거의 없다.let a: undefined = undefined;
let b: null = null;
// 비어있는 값
let a = [] // let a: any[]
// 모든 타입이 가능하다.
const a : any[] = [1, 2, 3, 4]
const b : any = true
a + b // 😱
let a:unknown;
let b = a + 1 // error : Object is of type 'unknown'.
if(typeof a === "number") {
let b = a + 1
}
if(typeof a === 'string') {
let b = a.toUpperCase();
}
function hello() {
console.log('x')
}
function hello():never {
return 'X'
// error: Type 'string' is not assignable to type 'never'.
}
function hello():never {
throw new Error('xxx')
} // ok
function hello(name:string|number){
if(typeof name === 'string'){
name // name : string
} else if (typeof name === 'number'){
name // name : number
} else {
name // name : never (값이 제대로 들어오면 실행될 일이 없음, 작동하지 않음)
}
}