TypeScript와 JavaScript (+ 프로그래밍)
목차
Ⅰ 타입과 인터페이스
Ⅰ_1 타입스크립트를 왜 쓰나요? (본인이 느낀점)
Ⅰ_2 타입과 인터페이스의 차이를 아나요?
Ⅰ_3 프로젝트 진행 시에 어떤 상황에서 타입을 쓰고 어떤 상황에서 인터페이스를 썼나요?
Ⅱ 프로그래밍
Ⅱ_1 프로그래밍이란 뭐라고 생각하나요?
Ⅱ_2 컴파일러는 뭐고 인터프리터는 뭔가요?
Ⅲ자바스크립트란
Ⅲ_1 자바스크립트의 특징은 뭐가 있나요?
Ⅰ 타입과 인터페이스
TypeScript : JavaScript의 태생적 문제를 극복하고자 대체 언어로 나타난 JavaScript(ES5)의 상위확장(Superset)
*자바스크립트의 태생적 문제 : 클래스 기반 객체지향 언어(Java,C++,C# 등)에 익숙한 개발자를 혼란스럽게 하며 코드가 복잡해질 수 있고 디버그와 테스트 공수가 증가하는 등의 문제가 있음
1
2
3
4
5
//JavaScript
function sum(a, b) {
return a + b; // 명확하지 않은 인수(오류를 예측하지 않은 값이 리턴될 수도 있음)
}
sum("x", "y"); //xy
1
2
3
4
5
//TypeScript
function sum(a: number, b: number) {
return a + b;
}
sum("x", "y"); //Error
=> 컴파일 단계에서 오류를 찾아낼 수 있음
=> 명시적 타입 지정은 개발자의 의도를 명확하게 코드로 기술할 수 있고 코드의 가독성을 높이고 예측할 수 있게 하여 디버깅이 쉬워짐
TypeScript는 JavaScript의 상위확장이므로 기존의 JavaScript 문법을 그대로 사용할 수 있음
- Babel 등의 별도의 트랜스파일러를 사용하지 않아도 ES6의 새로운 기능을 기존의 자바스크립트 엔진에서 실핼 할 수 있음
++ Angular의 TypeScript 정식 채용
Ⅰ_1 타입스크립트를 왜 쓰나요?
버그예방- JS의 버그중 15%를 TS 사용으로 미리 예방할 수 있음(연구결과)
- JS 선언시 타입을 지정해주지 않기 때문에 동작하면서 생기는 형변환 등의 문제로 예기치 않은 버그 발생
더 나은
개발자 경험과 코드 퀄리티 향상- 변수 데이터의 type까지 알 수 있게 해주기 때문에 코드 작성이 좀 더 쉽고 직관적이게 만들어줌
- 오브젝트 안의 속성 값을 IDE가 자동으로 리스트업 해줌
크로스브라우징(브라우저 호환성) 문제 해결- babel의 도움 없이 크로스브라우징 문제해결 가능(브라우저 지원 관련)
Ⅰ_2. 타입과 인터페이스의 차이를 아나요?
: 둘 다 타입을 정의할 때 사용
타입(Type)
- &를 이용해 상속을 통한 확장을 진행함
1 2 3
type GreetingsProps = GreetingsProps & { age: number; };
인터페이스(interface)
- 타입과 마찬가지로 객체의 타입의 이름을 지정하는 또 다른 방법
- extends를 이용해 상속을 통한 확장 진행함
1 2 3
interface GreetingsProps extends GreetingsProps { age: number; }
특징적 차이점
- interface에서 할 수 있는 대부분의 기능들은 type에서도 가능함
but…
| 특징 | type | interface |
|---|---|---|
| 새로운 속성 추가 (ex1) | 다시 같은 이름으로 선언 불가 | 선언적 확장 가능 |
| computed value의 사용 (ex2) | 가능 | 불가능 |
| 튜플(Tuple)과 배열 | 가능(튜플이나 단순한 원시값의 타입 선언) | 튜플의 프로토타입 체인 상에 있는 메서드들을 사용할 수 없음 |
**computed value 란 : 표현식을 이용해 객체의 key 값을 정의하는 문법
**튜플 이란 : 길이와 타입이 고정된 배열(이후 사용 시 튜플의 타입 순서, 정해진 길이에 맞지 않으면 에러남 | but. push 사용시 늘어남)
**원시값 : 기본 타입을 원시 데이터라고 부름 ex) 5, “foo”, false, null, undefined
1
2
3
//튜플 사용법
let user1: [number, string, string];
user1 = [1, "setType77@example.com", "1q2w3e4r"];
(ex1) 새로운 속성 추가
1
2
3
4
5
6
7
8
9
10
type Window = {
title: string;
};
type Window = {
ts: TypeScriptAPI;
};
// Error: Duplicate identifier 'Window'.
// 타입은 안된다.
1
2
3
4
5
6
7
8
9
10
11
12
interface Window {
title: string;
}
interface Window {
ts: TypeScriptAPI;
}
// 같은 interface 명으로 Window를 다시 만든다면, 자동으로 확장이 된다.
const src = 'const a = "Hello World"';
window.ts.transpileModule(src, {});
(ex2) computed value의 사용
1
2
3
4
5
6
7
8
9
10
11
12
//type
type names = "firstName" | "lastName";
type NameTypes = {
[key in names]: string;
};
const yk: NameTypes = { firstName: "yuki", lastName: "kim" };
interface NameInterface {
[key in names]: string; // error
}
Ⅰ_3 어떤 상황에서 타입을 쓰고 어떤 상황에서 인터페이스를 썼나요?
공식문서에서는 뭘 사용할지 모를때는 interface를 사용하고 type의 특성이 필요할때만 type을 사용하라고 권고함 <- 사실상 type과 interface의 성능의 차이는 크지 않음
So. 프로젝트 내에서 정해진 코드 컨벤션에 따라 사용하는 것이 적합함
Ⅱ 프로그래밍
Ⅱ_1 프로그래밍이란 뭐라고 생각하나요?
프로그래밍(programming)이란 흔히 개발이라고 부르기도 하며 말 그대로 프로그램을 만드는 행위
Ⅱ_2 컴파일러는 뭐고 인터프리터는 뭔가요?
- 컴파일러(compiler) : 특정 프로그램 소스 코드를 기계어로 변환하고 그 결과를 목적 파일에 써놓는 프로그램
- 인터프리터(interpreter) : 실행 전에 기계어로 컴파일 과정을 거치지 않고 소스코드를 바로 실행하는 일종의 실행 환경
-> 기계어로 변환된 코드를 실행 파일로 작성하지 않고 memory에 바로 로드시켜 실행함
**비교하기
| 컴파일 | 인터프릿 |
|---|---|
| 프로그래밍 언어를 기계어로 해석하는 방식 | 한번에 한줄씩 읽어서 해석하며 프로그램을 구동시킴 |
| 실행속도는 인터프리터보다 빠르게 실행됨 원시 프로그램의 크기가 크다면 시간이 오래걸림 | 실제 실행시간은 컴파일보다 느리나 대신 실시간 디버깅이나 코드수정 가능 고급 프로그램을 즉시 실행시킬 수 있음 |
**실행 과정
| 컴파일러 | 인터프리터 |
|---|---|
| 1. 어휘 분석 | 1. 한 명령어를 메모리에서 가져옴 |
| 2. 구문 분석 | 2. 가져온 명령어 해석 |
| 3. 중간 코드 생성 | 3. 필요한 데이터 가져옴 |
| 4. 최적화 | 4. 명령 실행 |
| 5. 코드생성 |
Ⅲ자바스크립트란
JavaScript : 객체 기반의 스크립트 언어
- 일반적으로 HTML(웹 내용 작성) -> CSS(웹 꾸미기) -> JavaScript(웹의 동작 구현)
**스크립트란? : 응용 소프트웨어를 제어하는 컴퓨터 프로그래밍 언어
Ⅲ_1 자바스크립트의 특징은 뭐가 있나요?
- JavaScript의 특징
- JS는 타입을 명시할 필요가 없는
인터프리터 언어(비교적 자료형 조사를 철저하게 하지 않음) 이벤트 중심의 프로그램 언어- 웹 문서에 삽입해서 사용하는 스크립트 언어
- 웹 브라우저에서 웹 문서를 실행할 때 프로그램 코드가 해석됨
객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있음
**객체 지향형 프로그래밍 : 컴퓨터 프로그래밍을 여러개의 독립된 객체들의 모임으로 파악하고자 함
**함수형 프로그래밍 : 순수 함수를 조합하고 소프트웨어를 만드는 방식
- JS는 타입을 명시할 필요가 없는
**JavaScript와 TypeScript 비교하기
| Javascript | Typescript |
|---|---|
| 동적타입 언어 | 정적타입 언어 |
| 인터프리터 언어 | 컴파일 언어 |
| 독립적으로 사용가능 | 자바스크립트에 의존적임 (자바스크립트로 컴파일된 후 실행) |
| 좀 더 유연함 (타입에 제한을 받지 않으므로) | 더 나은 구조와 간결함, 일관성, 재사용성 |
| .js 확장자 | .ts 확장자 |
| 작고 간단한 프로젝트에 적합함 | 복잡한 프로젝트에 적합함 |
총 정리
Ⅰ 타입과 인터페이스
타입스크립트를 왜 쓰나요?
- 버그예방
- 코드 퀄리티 향상
- 크로스브라우징 문제 해결
타입과 인터페이스의 차이를 아나요?
- 둘 다 타입을 정의할 때 사용하지만 사용방식이 다르고
- 새로운 속성을 추가했을 때 type의 경우 다시 같은 이름으로 선언이 불가하고 interface는 선언적 확장이 가능함
- computed valuesms type에서만 가능함
프로젝트 진행 시에 어떤 상황에서 타입을 쓰고 어떤 상황에서 인터페이스를 썼나요?
- 정해진 코드 컨벤션에 따라 사용하는 것이 적합함
- 위의 type의 특성이 필요할 때만 type을 사용함
Ⅱ 프로그래밍
- 프로그래밍이란 뭐라고 생각하나요?
- 프로그래밍(programming)이란 흔히 개발이라고 부르기도 하며 말 그대로 프로그램을 만드는 행위
- 컴파일러는 뭐고 인터프리터는 뭔가요?
- 컴파일러 : 프로그래밍 언어를 기계어로 해석하는 방식
- 인터프리터 : 한번에 한줄씩 읽어서 해석하며 프로그램을 구동시킴
Ⅲ자바스크립트란
- 자바스크립트의 특징은 뭐가 있나요?
- 객체 기반의 스크립트 언어
- 타입을 명시할 필요가 없는 인터프리터 언어
- 웹 문서에 삽입해서 사용하는 스크립트 언어
- 웹 브라우저에서 웹 문서를 실행할 때 프로그램 코드가 해석됨
출처
TS에 대하여
JS와 TS의 차이점
타입과 인터페이스
프로그래밍
컴파일과 인터프리터
컴파일과 인터프리터 디테일