[TS] TypeScript 환경 셋팅 / 변수 끄적끄적

* typescript 설치없이 연습할 수 있는 사이트

https://www.typescriptlang.org/play/

TS Playground - An online editor for exploring TypeScript and JavaScript

 

2012년에 발표된 오픈소스 프로그래밍 언어

대규모  javascript 애플리케이션 개발을 목적

마이크로 소프트에 의해 개발

 

javascript: 타입이 동적타입 언어

typescript: 정적타입 언어

 

typescript => javascript

app.ts => tsc app.ts => app.js

typescript는 javascript로 변환하는 과정을 거쳐야 함

 

* 변수

let num: number = 30   // number만

let str: string = "green"   // string만

 

let numbers : number []

let numbers2 : Array<number>

 

function myFunc(a: number, b: string) : void  {  // void는 return 없음

 

}

 

- 타입스크립트 컴파일러

npm install -g typescript

npm init   // enter enter ~

 

tsconfig.json

{
    // 포함되어질 파일을 지정
    "include": ["src/**/*.ts"],
    // 노드패키지는 컴파일 대상에서 제외
    "exclude": [
        "node_modules"
    ],
    // 타입스크립트 컴파일러에 대한 옵션지정
    "compilerOptions": {
        // 모듈에 대한 옵션
        "module":"es6",
        // 모듈의 루트가 되는 폴더
        "rootDir":"src",
        // 컴파일된 파일들의 최상위 폴더
        "outDir":"dist",
        // 자바스크립트 구문 지정
        "target": "es6",
        // 원본타입스크립트를 나타낼지 지정
        "sourceMap": true,
        // 컴파일시 주석 제거하기 지정
        "removeComments": true,
        // 타입을 지정하도록 지정
        "noImplicitAny": true
    }
}

 

hello.ts

let hello = "hello";
let hello2 = "hello2";
let timeoutPromise = new Promise((resolve, reject) => {
    setTimeout(()=>{
        resolve('1초')
    }, 1000)
})
timeoutPromise.then(console.log);
import add from './util.js';
const value = add(1,5);
console.log(value);

// tsc [파일명] [옵션] 
// tsc hello.ts

 

util.ts

export default function add(a, b) {
    return a + b;
}

 

---

 

tsc hello.ts

이렇게 컴파일 하면

Promise를 지원하지 않는 버전..?이라서 오류가 나니

tsc hello.ts --target es6

이렇게 컴파일 할 것 ~

내 컴퓨터는 되던데 안될 경우

PowerShell 말고 CMD 창으로 변경 후 컴파일하기 !

 

---

 

 

ex01.ts

// 변수에 초기값을 할당하면 초기값의 데이터 타입이 지정됨
// 다른 데이터 타입을 넣을 수 없음
// 변수 선언시 초기값을 할당하지 않고 선언만 한 경우 any타입이 되어
// 다양한 타입을 할당할 수 있음
// 변수 선언시 타입도 지정 ex> let score; number = 20

function outer() {
    if(true) {
        let score ;
        let score2: number;
        score = 30; 
        score = true; 
    }
}
outer();

 

 tsc

하면 !

dist라는 폴더가 생성된다

 

ex02_basicType.ts

let numValue: number;
let stringValue: string;
let booleanValue: boolean;
let undefinedValue: undefined;
let nullValue: null;
let objValue: object;
let symbolValue: symbol;

numValue = 30;
stringValue = "hello";

booleanValue = true;
// undefined와 null은 하위타입이라 넣어도 오류 안남
booleanValue = undefined;
booleanValue = null;

// 원시형 값을 제외한 객체
objValue = [1, 2, 3, 4, 5];

// 배열 정의
let nameList: string[];
nameList = ["a", "b", "c", "d"]

// 객체 정의- 값이 아닌 프로퍼티에 대한 타입을 지정
// 인라인 타입지정
let user1: { name: string, age: number }
user1 = {
    name:"green",
    age:30
}

// 인터페이스
// 인터페이스 메서드 정의
interface TV {   // 인터페이스는 대문자로 작성
    turnON(): boolean;
    turnOFF(): void;
}
const myTV: TV = {
    turnON() {
        return true;
    },
    turnOFF() {  
    }
}
// tv: 매개변수명 TV: 타입
function tryTurnON(tv: TV){
    console.log(tv.turnON());
}
tryTurnON(myTV);

// 일반 변수, 매개변수, 개체 속성등에 : TYPE 이런 형태로 타입을 지정할 수 있다

function add(a:number, b:number) {
    return a + b;
}

add(10, 20)

// 배열 array 구문:string [], Array<String>
let arr1: string [ ] = ['a', 'b', 'c']
let arr2: Array<string> = ['a', 'b', 'c']

// 유니언 타입(다중타입) - 문자열과 숫자를 동시에 가지는 배열
let arr1_uni: ( string | number ) [] = ['a', 'b', 'c', 1, 2, 3]
let arr2_uni: Array<string | number> = ['a','b','c', 1, 2, 3]

// 데이터 타입을 지정할 수 없을 때 any타입을 지정
let someArr: any [] = [0, 1, "A", true]

 

또 tsc!

dist 폴더에 같은 이름의 js파일이 만들어진다 !

 

 

ex03_interface.ts

// 객체를 반복적으로 만들어줄 때는 인라인보다는 interface 사용
interface IUser {
    name: string,
    age: number,
    isValid: boolean
}
let useArr: IUser [] = [
    {
        name: 'Neo',
        age: 35,
        isValid: true
    },
    {
        name: 'Lewis',
        age: 35,
        isValid: true
    },
    {
        name: 'Evan',
        age: 35,
        isValid: true
    }
]

interface IDog {
    name: string,
    color: string,
    age: number
}
let dog1: IDog = {
    name: "구름",
    color: "흰색",
    age: 3
}
let dog2: IDog = {
    name: "크림",
    color: "흰색",
    age: 2
}

// 인라인 타입지정
let user10: { name: string, age: number }
user10 = {
    name: "green",
    age: 30
}

// 읽기전용 배열 생성하기
let arrA : readonly number [] = [1, 2, 3, 4]
let arrB : ReadonlyArray<number> = [0, 9,8, 7]

 

ex04_function.ts

// 함수의 리턴 타입 지정 function myFun(): 타입지정

// function myFunction(num: number): number {   // return은 number로 하겠다
//     let result: number = num + 10
//     return result
// }

// console.log(myFunction(10))

function myFunction(num: number): void {   // return은 함수로 하겠다
    let result: number = num + 10
    console.log(result)
}

// optional ? 키워드를 사용하면 선택적 매개변수를 지정할 수 있음
function myAdd(x: number, y?: number) : number {   // y는 있어도 되구 없어두 됨
    return x + (y || 0);
}
const sum = myAdd(2);
console.log(sum)

const sum2 = myAdd(2, 5);
console.log(sum2)

interface IUser2 {
    name: string,
    age: number,
    isAdult?: boolean
}
let userA: IUser2 = {
    name: "aa",
    age: 10,
    isAdult: false
}
let userB: IUser2 = {
    name: "bb",
    age: 20
}

// 화살표 함수 타입지정하기
// let arrFunction = () => {

// }

// 인수와 반환값이 없을 경우
let arrFunction : () => void;
arrFunction = function() {
    console.log('abc')
}

// 인수와 반환값이 있을 경우
let arrFunction2 : (arg1: number, arg: number) => number;
arrFunction2 = function(x, y) {
    return x + y;
}

interface IUser3 {
    readonly name: string,
    age: number
}
let userC: IUser3 = {
    name: "Neo",
    age: 30
}
userC.age = 20;
// userC.name= "aaaa" // readonly는 수정 몬함
console.log(userC.name)

interface IUser4 {
    name: string,
    age: number
}
let userD: Readonly<IUser4> = {
    name: 'green',
    age: 12
}
// userD.age= 20 // 에러발생