(TypeScript) typescript

• 마이크로소프트에서 만든 Javascript  기반 프로그래밍 언어
  
  • typescript는 javascript의 superset
  • javascript 기본 문법에 typescript의 문법을 추가한 언어
  • 유효한 Javascript로 작성한 코드는 확장자를 .js에서 .ts로 변경하고 그 typescript로 컴파일하여 변환 가능
• JS + TYPE (Javascript에 자료형을 추가 한 것)
  
  • 자료형 : string, number, boolean, null, undefined, object, array 등등
• 기본 설치 : npm i -D typescript
  
  • TS는 바로 실행하는 것이 아닌 Compiler를 사용
  • Compile로 JS로 변환 후 실행
  • 대표적으로 C++, C#, Java 등등 사용
  • TS는 브라우저, node.js에서 바로 사용할 순 없다
  • 명령어 tsc (typescript compiler)
    
    • tsc -v : ts버전을 확인
    • tsc -init : typescript 환경으로 초기화
    • npx tsc : npm i -D typescript
    • tsc : npm i -g typescript

 

let num: number = 1234;
let str: string = "asdasd";
let bool: boolean = true;
let und: undefined = undefined;
let nul: null = null;

• let(const) 변수명 : 변수타입 = 변수 value;

 

let numUnd: number | undefined = undefined;
numUnd = 1234;

• 위 코드 처럼 비트연산자( | )를 사용해서 type을 여러 개 사용할 수 있다. 

 

let any: any = undefined;
any = 1234;
any = "asdasd";
let unk: unknown = undefined;
// consolg.log(unk);
if(typeof unk === "string") unk = 1234;
consolg.log(unk);

console.log(any.length);
// console.log(unk.length);

• any 타입은 모든 자료형을 포함하여 설정하는 것, 이에 문자열 메서드를 사용이 가능
• unknown 타입은 자료형을 모른다고 판단하여서 각종 메서드, 키를 사용할 수 없다

 

let obj: { a: number; b?: string | number } = { a: 1 };
obj.b = 1234;

let arr: Array<number | string> = [12, 3, 4, 5, 6, "Asd", "123rtpierjdgfs"];
let arr1: [string, number] = ["12", 3];
let arr2: string[] = ["2", "asd", "zxcjajslfjdlasf"];

// let arr3: Array<any> = [undefined, null, "asd", 1234];

• 객체형식의 obj라는 변수
• key a는 숫자 자료형 value를 가질 수 있다
• key b는 있거나 없을 수 있는데 만일 있다면 문자열 자료형이나 숫자 자료형을 value로 가질 수 있다
  
  
• 배열 arr은 숫자 자료형이나 문자열 자료형을 원소로 몇 개든 가질 수 있는 배열
• 배열 arr1은 첫 번째 원소는 문자열 자료형을 가지고 두 번째 원소는 숫자 자료형, 즉 2개의 원소를 가지는 배열
• 배열 arr2은 문자열 자료형을 가진 배열
  
  • ※ 배열 arr3처럼 배열의 자료형을 any로 선언하지 말도록 합시다!!!

 

ts에서의 함수 사용법 )

function funcA(): void {
  console.log("funcA");
}
const funcB = function (): number {
  return 11;
};
const funcC = (): string => {
  return "asdASD";
};

• TS에서 함수의 자료형 설정은 return에 대해서 표시해주면 된다
• 반환값에 대한 자료형은 소괄호() 뒤에 표시
• 함수 funA는 반환값이 없기에 소괄호 뒤에 : void로 자료형을 표기한다
• 함수 funB는 반환값이 숫자 11을 반환하고 있기에 함수에 대한 자료형은 number로 표기
• 함수 funC는 반환값으로 문자열 "asdASD" 반환하고 있기에 함수에 대한 자료형은 string으로 표기

 

function sumA(a: number, b: number): number {
  return a + b;
}
console.log(sumA(1, 2));

const sumB = function (numbers: { a: number; b: number }): number {
  return numbers.a + numbers.b;
};

const sumC = ({ a, b }: { a: number; b: number }) => {
  return a + b;
};

interface Inumbers {
  a: number;
  b: number;
}
function sumD({ a, b }: Inumbers): number {
  return a + b;
}

• 매개변수함수 sumA : 두 개의 인자를 받는다
  
  • 그 인자들의 타입은 숫자형이고 매개변수함수 또한 반환값으로 숫자를 내보내니까 숫자 자료형
    
    
• 매개변수함수 sumB : 두 개의 인자를 받는다
  
  • 그 두 인자를 numbers라는 객체로 묶고 자료형을 표기
    
    
• 매개변수함수 sumC : sumB함수처럼 객체로 묶었지만 타입 설정을 구조분해할당으로 해주었다
  
  
  
• 매개변수함수 sumD : 이전 함수들과는 다르게 interface라는 것을 생성하여 거기에 자료형을 미리 선언
  
  • interface 이름을 기존에 매개변수인자들의 자료형을 선언해 주는 곳에 표기