blair's 개발 portfolio

[TypeScript] 타입스크립트 기본타입

타입스크립트 변수나 함수와 같은 자바스크립트 코드에 타입을 정의할 수 있다.

기본 타입은 

  • Boolean
  • Number
  • String
  • Object
  • Array
  • Tuple

배열의 길ㅇ가 고정되고 각 요소의 타입이 지정되어 있는 배열의 형식을 의미

만약 정의하지 않은 타입, 인덱스로 접근할 경우 오류가 난다

  • Enum
  • any

기본 자바스크립트로 구현되어 있는 웹 서비스 코드에 타입스크립트를 점진적으로 적용할 때 활용하면 좋은 타입.

단어 의미 그대로 모든 타입에 대해서 허용 (권장하지 않음)

  • void

반환값이 있는 함수의 반환 타입, return이 없거나 있더라도 반환하는 값이 없으면 함수의 반환 타입을 void로 지정

  • null
  • undefined
  • never

함수의 끝에 절대 도달하지 않는다는 의미를 지닌 타입

//string

let str: string
let red: string = 'red'
let green: string = 'Green'
let myColor: string  = `My color is ${red}.`
let youtColor: string = `Your color is ` + green


// 숫자
let num: number
let integer: number = 6
let float:  number = 3.14
//등등

// 불린
let isBoolean: boolean
let isDone: boolean = false

// Null / undefined
let nul: null
let unde: undefined
nul = null; 
let num2: number
console.log(nul); //지정하는 것이 가능은 하다.

// 배열
const fruits: string[] = ['banana','apple','cherry']
const numbers: number[] = [1,2,3,4,5]
const union: (string|number)[] = ['apple',1,2,'banana']
//버티컬바를 사용하고 소괄호를 작성하지 않으면 다르게 해석될 수 있다.
const array: number[] = [1,2,3]
//배열 타입은 항상 배열을 의미하는 대괄호와 그안에 들어갈 아이템 타입을 같이 작성해서 완성

// 객체

const obj: object = {}
const arr: object = []
const func: object = function(){}

interface User { //일반 변수와 다름을 표현하기 위해
    name: string,
    age :number,
    isValid : boolean
}
const userA: User = {
    name: 'heropy',
    age :25,
    isValid : true
}

// 함수

const add  
= function(x: number,y: number): number 
{
    return x + y
}
const a: number = add(1,2)
const hello = function(): void {  //void라는 것을 통해서 return이 없을때 반환해준다
    console.log('hello world')
}
const h: void = hello();

// Any 아무거나 할당해도 되는

let hellos: any = 'hello world'
hellos = 123
hellos = false
hellos = null 

// Unknwon

const v: any = 123
const n: unknown = 123

const any: any = n
const boo: boolean = v
const num3: number = v
const objs: {x: string, y: number} = v

// Tuple

const tuple: [string,number,boolean] = ['a',1,false]
const userss: [number,string,boolean][] 
= [[1,'neo',true],[2,'neo',false],[3,'neo',true]]
// Void

function hello1(msg: string): void {
    console.log(`Hello ${msg}`)
}
const h1: void = hello1('world');
// never

const nev: number[] = []
nev.push(3)

// Union

let unions: (string|number|boolean)[]

unions = 'hello type'
unions = 123

// Intersection

interface Users {
    name : string,
    age :  number
}
interface Vaildation {
    isValid: boolean
}
const heropy: User & Vaildation = {
    name : 'neo',
    age: 80,
    isValid: false
}

블로그의 정보

개발 블로그👩‍💻

Blairj

활동하기