Share
Sign In
📄

Basic & Types

TS는 정적 타입 검사기이다.
js와 ts의 차이점
JS에서 발생할 수 있는 일반적인 에러는 오타, 타입 실수 등이 큰 비중을 차지한다.
위와 같은 코드는 인자로 전달된 객체가 flip이라는 호출가능한 프로퍼티을 가져야만 함수가 잘동작하게 된다.
JavaScirpt 에서는 문제가 생기는지를 호출하고 실행해보아야만 알 수 있다.
TypeScript에서는 어떤 값이 함수로 전달될 수 있고 어떤 값은 실패할 것임을 설명하므로 “정적 타입 시스템”을 사용하여 코드가 실행되기전에 코드에 대하여 예측한다.
코드를 실행하기 전에 버그들을 미리 발견할 수 있는 도구가 바로 TypeScript와 같은 정적 타임 검사기이다.
js에서는 예외, ts에서는 실행 실패
js 에서는 아래와 같은 상황에서는 undefined를 반환
ts에서는 location이 저정의 되지 않았다는 오류를 발생시킨다.
ts는 코드 수정에 활용될 수 있고, 코드를 입력할 때 오류 메세지를 제공하여 코드 완성 기능을 제공한다.
시작하기
tsc 컴파일러
코드 상에서는 아무런 맡줄도 그어지지 않지만, 아래의 방법으로 tsc 명령어를 실행하여 타입 검사를 수행한다. 이렇게 tsc 명령어로 ts 파일을 컴파일 하여 js 파일을 생성한다.
js에서는 실행에 이상이 없지만, 방어적인 ts에서 오류가 생길 경우, 오류를 밷지 않도록 컴파일 할 수 있다.
타입스크립트를 사용할 때, 타입 검사는 선택사항이며, 타입 추론은 가장 관대한 기준으로 이루어지고, , 잠재적인 null/undefined 값에 대한 검사는 이루어지지 않는다. 하지만 대부분의 사용자들은 최대한으로의 타입검사를 수행해주기를 선호하기 때문에 TS에서는 엄격도 설정을 제공한다.
TS에서는 CLI에서 --strict 플래그를 설정하거나 tsconfig.json에 "strict": true를 추가하면 모든 플래그를 동시에 활성화하게 되지만, 각각의 플래그를 개별적으로 끌 수도 있다. 반드시 알아야 하는 두 가지 가장 주요한 옵션은 noImplicitAny와 strictNullChecks 이다.
noImplicitAny : 타입이 any로 암묵적으로 추론되는 변수에 대해 오류를 발생시킨다.
strictNullChecks : null과 undefined와 같은 값을 명시적으로 처리하여, null, undefined 처리를 잊었는지 체크해준다.
타입스크립트의 타입
변수의 타입 표기가 이루어 지지 않으면 문맥적으로 해석한다. 따라서 표기하지 않아도 되는것이 일반적이다.
원시타입 (string, number, boolean)
자바스크립트에서 typeof를 사용하면 타입을 확일 할 수 있는 데, 흔하게 사용되는 세가지 타입. string, number, boolean 이 있다.
배열
배열 앞에 배열의 성격을 정의할 수 있다. number[], string[]
any
타입스크립트만의 특별한 타입. 타입 검사 오류를 발생하는 것을 원치 않을 때 사용하는 것이다. 타입이 지정되지 않은 값에 대하여 타입스크립트가 문맥으로 부터 타입을 추론해내는데, 그럴 수 없다면 any 타입을 부여하는 것으로 동작한다.
함수
반환 타입 또한 변수타입과 마찬가지로 표기하지 않아도 되는것이 일반적이다. 왜냐하면 TS가 함수에 들어있는 return문을 바탕으로 타입을 추론하기 때문이다.
하지만 문서화의 목적이나, 잘못된 수정을 미연에 방지하고자, 혹은 지극히 개인적인 선호에 의하여 명시적인 타입 표기를 수행하는 코드도 있다.
객체
객체는 프로퍼티를 가지는 javaScript의 값을 말한다.
각 프로퍼티를 구분할 때 , 또는 ;를 사용할 수 있고, 가장 마지막에 위치한 구분자의 표기는 선택 사항이다.
Optional Property
객체 타입에 선택적으로 넣어야하는 프로퍼티가 있다면, 프로퍼티에 ? 를 붙이면 된다.
하지만 존재하지 않은 객체의 프로퍼티를 선택했을 때, 자바스크립트에서는 undefined를 출력하지만 타입스크립트에서는 strictNullChecks 옵션을 사용할 경우 이를 핸들링해 주어야 한다.
조건문을 통해 핸들링해 줄 수 있고, 옵셔널 체이닝 또는 삼항연산자 등을 통해 핸들링해줄 수 있다. 또 다른 방법으로는 default value를 설정함으로 이를 해결할 수 잇다.
여러가지 타입 허용(유니언 타입)
두개 이상의 타입을 사용하는 것을 허용.
위와 같은 유니언 타입일 경우에는 string 타입일 때만 사용할 수 있는 유요한 매서드를 사용할 수 없다.
이를 해결하려면 인자로 들어오는 타입에 따라 로직을 분기해야한다.
타입 별칭
type
타입 선언이 길어질 경우, 이를 따로 빼서 별칭을 부여할 수 있다.
인터페이스
type 별칭을 사용하는 것과 마찬가지로, 타입의 별칭을 생성하는 데 사용한다.
type과 매우 유사하며, interface가 가지는 대부분의 기능은 type에서도 동일하게 동작한다. 이 둘의 차이는, type은 새 프로퍼티를 추가하도록 개방될 수 없는 반면, 인터페이스의 경우 항상 확장될 수 있다는 점이다.
Type Assertions
TypeScript 보다 어떤 값의 타입에 대한 정보를 더 잘아는 경우, 이를 더 구체적으로 명시 해줄 수 있다.
Type Assertions에 대해서는 관련 검사는 런타임 중에 이루어지지 않는다. 타입 단언이 틀렸더라도 예외가 발생하거나 null이 생성되지 않는다.
리터럴 타입
string과 number와 같은 일반적인 타입 이외에도, 구체적인 문자열과 숫자 타입을 지정 할 수 있다.
null과 undefined
strictNullChecks 옵션의 설정 여부에 따라 타입스크립트에 동작이 달라진다.
strictNullChecks가 설정되지 않았다면, 어떤 값이 null 또는 undefined일 수 있더라도 해당 값에 평소와 같이 접근할 수 있으며, null과 undefined는 모든 타입의 변수에 대입될 수 있다.
strictNullChecks 가 설정 되었을 때, 어떤 값이 null 또는 undefined일 때, 해당 값과 함께 메서드 또는 프로퍼티를 사용하기에 앞서 해당 값을 테스트해야 합니다. 옵셔널 프로퍼티를 사용하기에 앞서 undefined 여부를 검사하는 것과 마찬가지로 if문과 같은 조건문를 통하여 null일 수 있는 값에 대한 검사를 수행할 수 있다.
JavaScript 돌아가기
메인으로 돌아가기
TS는 정적 타입 검사기이다.
js와 ts의 차이점
JS에서 발생할 수 있는 일반적인 에러는 오타, 타입 실수 등이 큰 비중을 차지한다.
위와 같은 코드는 인자로 전달된 객체가 flip이라는 호출가능한 프로퍼티을 가져야만 함수가 잘동작하게 된다.
JavaScirpt 에서는 문제가 생기는지를 호출하고 실행해보아야만 알 수 있다.
TypeScript에서는 어떤 값이 함수로 전달될 수 있고 어떤 값은 실패할 것임을 설명하므로 “정적 타입 시스템”을 사용하여 코드가 실행되기전에 코드에 대하여 예측한다.
코드를 실행하기 전에 버그들을 미리 발견할 수 있는 도구가 바로 TypeScript와 같은 정적 타임 검사기이다.
js에서는 예외, ts에서는 실행 실패
js 에서는 아래와 같은 상황에서는 undefined를 반환
ts에서는 location이 저정의 되지 않았다는 오류를 발생시킨다.
ts는 코드 수정에 활용될 수 있고, 코드를 입력할 때 오류 메세지를 제공하여 코드 완성 기능을 제공한다.
시작하기
tsc 컴파일러
코드 상에서는 아무런 맡줄도 그어지지 않지만, 아래의 방법으로 tsc 명령어를 실행하여 타입 검사를 수행한다. 이렇게 tsc 명령어로 ts 파일을 컴파일 하여 js 파일을 생성한다.
js에서는 실행에 이상이 없지만, 방어적인 ts에서 오류가 생길 경우, 오류를 밷지 않도록 컴파일 할 수 있다.
타입스크립트를 사용할 때, 타입 검사는 선택사항이며, 타입 추론은 가장 관대한 기준으로 이루어지고, , 잠재적인 null/undefined 값에 대한 검사는 이루어지지 않는다. 하지만 대부분의 사용자들은 최대한으로의 타입검사를 수행해주기를 선호하기 때문에 TS에서는 엄격도 설정을 제공한다.
TS에서는 CLI에서 --strict 플래그를 설정하거나 tsconfig.json에 "strict": true를 추가하면 모든 플래그를 동시에 활성화하게 되지만, 각각의 플래그를 개별적으로 끌 수도 있다. 반드시 알아야 하는 두 가지 가장 주요한 옵션은 noImplicitAny와 strictNullChecks 이다.
noImplicitAny : 타입이 any로 암묵적으로 추론되는 변수에 대해 오류를 발생시킨다.
strictNullChecks : null과 undefined와 같은 값을 명시적으로 처리하여, null, undefined 처리를 잊었는지 체크해준다.
타입스크립트의 타입
변수의 타입 표기가 이루어 지지 않으면 문맥적으로 해석한다. 따라서 표기하지 않아도 되는것이 일반적이다.
원시타입 (string, number, boolean)
자바스크립트에서 typeof를 사용하면 타입을 확일 할 수 있는 데, 흔하게 사용되는 세가지 타입. string, number, boolean 이 있다.
배열
배열 앞에 배열의 성격을 정의할 수 있다. number[], string[]
any
타입스크립트만의 특별한 타입. 타입 검사 오류를 발생하는 것을 원치 않을 때 사용하는 것이다. 타입이 지정되지 않은 값에 대하여 타입스크립트가 문맥으로 부터 타입을 추론해내는데, 그럴 수 없다면 any 타입을 부여하는 것으로 동작한다.
함수
반환 타입 또한 변수타입과 마찬가지로 표기하지 않아도 되는것이 일반적이다. 왜냐하면 TS가 함수에 들어있는 return문을 바탕으로 타입을 추론하기 때문이다.
하지만 문서화의 목적이나, 잘못된 수정을 미연에 방지하고자, 혹은 지극히 개인적인 선호에 의하여 명시적인 타입 표기를 수행하는 코드도 있다.
객체
객체는 프로퍼티를 가지는 javaScript의 값을 말한다.
각 프로퍼티를 구분할 때 , 또는 ;를 사용할 수 있고, 가장 마지막에 위치한 구분자의 표기는 선택 사항이다.
Optional Property
객체 타입에 선택적으로 넣어야하는 프로퍼티가 있다면, 프로퍼티에 ? 를 붙이면 된다.
하지만 존재하지 않은 객체의 프로퍼티를 선택했을 때, 자바스크립트에서는 undefined를 출력하지만 타입스크립트에서는 strictNullChecks 옵션을 사용할 경우 이를 핸들링해 주어야 한다.
조건문을 통해 핸들링해 줄 수 있고, 옵셔널 체이닝 또는 삼항연산자 등을 통해 핸들링해줄 수 있다. 또 다른 방법으로는 default value를 설정함으로 이를 해결할 수 잇다.
여러가지 타입 허용(유니언 타입)
두개 이상의 타입을 사용하는 것을 허용.
위와 같은 유니언 타입일 경우에는 string 타입일 때만 사용할 수 있는 유요한 매서드를 사용할 수 없다.
이를 해결하려면 인자로 들어오는 타입에 따라 로직을 분기해야한다.
타입 별칭
type
타입 선언이 길어질 경우, 이를 따로 빼서 별칭을 부여할 수 있다.
인터페이스
type 별칭을 사용하는 것과 마찬가지로, 타입의 별칭을 생성하는 데 사용한다.
type과 매우 유사하며, interface가 가지는 대부분의 기능은 type에서도 동일하게 동작한다. 이 둘의 차이는, type은 새 프로퍼티를 추가하도록 개방될 수 없는 반면, 인터페이스의 경우 항상 확장될 수 있다는 점이다.
Type Assertions
TypeScript 보다 어떤 값의 타입에 대한 정보를 더 잘아는 경우, 이를 더 구체적으로 명시 해줄 수 있다.
Type Assertions에 대해서는 관련 검사는 런타임 중에 이루어지지 않는다. 타입 단언이 틀렸더라도 예외가 발생하거나 null이 생성되지 않는다.
리터럴 타입
string과 number와 같은 일반적인 타입 이외에도, 구체적인 문자열과 숫자 타입을 지정 할 수 있다.
null과 undefined
strictNullChecks 옵션의 설정 여부에 따라 타입스크립트에 동작이 달라진다.
strictNullChecks가 설정되지 않았다면, 어떤 값이 null 또는 undefined일 수 있더라도 해당 값에 평소와 같이 접근할 수 있으며, null과 undefined는 모든 타입의 변수에 대입될 수 있다.
strictNullChecks 가 설정 되었을 때, 어떤 값이 null 또는 undefined일 때, 해당 값과 함께 메서드 또는 프로퍼티를 사용하기에 앞서 해당 값을 테스트해야 합니다. 옵셔널 프로퍼티를 사용하기에 앞서 undefined 여부를 검사하는 것과 마찬가지로 if문과 같은 조건문를 통하여 null일 수 있는 값에 대한 검사를 수행할 수 있다.
JavaScript 돌아가기
메인으로 돌아가기
TS는 정적 타입 검사기이다.
js와 ts의 차이점
JS에서 발생할 수 있는 일반적인 에러는 오타, 타입 실수 등이 큰 비중을 차지한다.
위와 같은 코드는 인자로 전달된 객체가 flip이라는 호출가능한 프로퍼티을 가져야만 함수가 잘동작하게 된다.
JavaScirpt 에서는 문제가 생기는지를 호출하고 실행해보아야만 알 수 있다.
TypeScript에서는 어떤 값이 함수로 전달될 수 있고 어떤 값은 실패할 것임을 설명하므로 “정적 타입 시스템”을 사용하여 코드가 실행되기전에 코드에 대하여 예측한다.
코드를 실행하기 전에 버그들을 미리 발견할 수 있는 도구가 바로 TypeScript와 같은 정적 타임 검사기이다.
js에서는 예외, ts에서는 실행 실패
js 에서는 아래와 같은 상황에서는 undefined를 반환
ts에서는 location이 저정의 되지 않았다는 오류를 발생시킨다.
ts는 코드 수정에 활용될 수 있고, 코드를 입력할 때 오류 메세지를 제공하여 코드 완성 기능을 제공한다.
시작하기
tsc 컴파일러
코드 상에서는 아무런 맡줄도 그어지지 않지만, 아래의 방법으로 tsc 명령어를 실행하여 타입 검사를 수행한다. 이렇게 tsc 명령어로 ts 파일을 컴파일 하여 js 파일을 생성한다.
js에서는 실행에 이상이 없지만, 방어적인 ts에서 오류가 생길 경우, 오류를 밷지 않도록 컴파일 할 수 있다.
타입스크립트를 사용할 때, 타입 검사는 선택사항이며, 타입 추론은 가장 관대한 기준으로 이루어지고, , 잠재적인 null/undefined 값에 대한 검사는 이루어지지 않는다. 하지만 대부분의 사용자들은 최대한으로의 타입검사를 수행해주기를 선호하기 때문에 TS에서는 엄격도 설정을 제공한다.
TS에서는 CLI에서 --strict 플래그를 설정하거나 tsconfig.json에 "strict": true를 추가하면 모든 플래그를 동시에 활성화하게 되지만, 각각의 플래그를 개별적으로 끌 수도 있다. 반드시 알아야 하는 두 가지 가장 주요한 옵션은 noImplicitAny와 strictNullChecks 이다.
noImplicitAny : 타입이 any로 암묵적으로 추론되는 변수에 대해 오류를 발생시킨다.
strictNullChecks : null과 undefined와 같은 값을 명시적으로 처리하여, null, undefined 처리를 잊었는지 체크해준다.
타입스크립트의 타입
변수의 타입 표기가 이루어 지지 않으면 문맥적으로 해석한다. 따라서 표기하지 않아도 되는것이 일반적이다.
원시타입 (string, number, boolean)
자바스크립트에서 typeof를 사용하면 타입을 확일 할 수 있는 데, 흔하게 사용되는 세가지 타입. string, number, boolean 이 있다.
배열
배열 앞에 배열의 성격을 정의할 수 있다. number[], string[]
any
타입스크립트만의 특별한 타입. 타입 검사 오류를 발생하는 것을 원치 않을 때 사용하는 것이다. 타입이 지정되지 않은 값에 대하여 타입스크립트가 문맥으로 부터 타입을 추론해내는데, 그럴 수 없다면 any 타입을 부여하는 것으로 동작한다.
함수
반환 타입 또한 변수타입과 마찬가지로 표기하지 않아도 되는것이 일반적이다. 왜냐하면 TS가 함수에 들어있는 return문을 바탕으로 타입을 추론하기 때문이다.
하지만 문서화의 목적이나, 잘못된 수정을 미연에 방지하고자, 혹은 지극히 개인적인 선호에 의하여 명시적인 타입 표기를 수행하는 코드도 있다.
객체
객체는 프로퍼티를 가지는 javaScript의 값을 말한다.
각 프로퍼티를 구분할 때 , 또는 ;를 사용할 수 있고, 가장 마지막에 위치한 구분자의 표기는 선택 사항이다.
Optional Property
객체 타입에 선택적으로 넣어야하는 프로퍼티가 있다면, 프로퍼티에 ? 를 붙이면 된다.
하지만 존재하지 않은 객체의 프로퍼티를 선택했을 때, 자바스크립트에서는 undefined를 출력하지만 타입스크립트에서는 strictNullChecks 옵션을 사용할 경우 이를 핸들링해 주어야 한다.
조건문을 통해 핸들링해 줄 수 있고, 옵셔널 체이닝 또는 삼항연산자 등을 통해 핸들링해줄 수 있다. 또 다른 방법으로는 default value를 설정함으로 이를 해결할 수 잇다.
여러가지 타입 허용(유니언 타입)
두개 이상의 타입을 사용하는 것을 허용.
위와 같은 유니언 타입일 경우에는 string 타입일 때만 사용할 수 있는 유요한 매서드를 사용할 수 없다.
이를 해결하려면 인자로 들어오는 타입에 따라 로직을 분기해야한다.
타입 별칭
type
타입 선언이 길어질 경우, 이를 따로 빼서 별칭을 부여할 수 있다.
인터페이스
type 별칭을 사용하는 것과 마찬가지로, 타입의 별칭을 생성하는 데 사용한다.
type과 매우 유사하며, interface가 가지는 대부분의 기능은 type에서도 동일하게 동작한다. 이 둘의 차이는, type은 새 프로퍼티를 추가하도록 개방될 수 없는 반면, 인터페이스의 경우 항상 확장될 수 있다는 점이다.
Type Assertions
TypeScript 보다 어떤 값의 타입에 대한 정보를 더 잘아는 경우, 이를 더 구체적으로 명시 해줄 수 있다.
Type Assertions에 대해서는 관련 검사는 런타임 중에 이루어지지 않는다. 타입 단언이 틀렸더라도 예외가 발생하거나 null이 생성되지 않는다.
리터럴 타입
string과 number와 같은 일반적인 타입 이외에도, 구체적인 문자열과 숫자 타입을 지정 할 수 있다.
null과 undefined
strictNullChecks 옵션의 설정 여부에 따라 타입스크립트에 동작이 달라진다.
strictNullChecks가 설정되지 않았다면, 어떤 값이 null 또는 undefined일 수 있더라도 해당 값에 평소와 같이 접근할 수 있으며, null과 undefined는 모든 타입의 변수에 대입될 수 있다.
strictNullChecks 가 설정 되었을 때, 어떤 값이 null 또는 undefined일 때, 해당 값과 함께 메서드 또는 프로퍼티를 사용하기에 앞서 해당 값을 테스트해야 합니다. 옵셔널 프로퍼티를 사용하기에 앞서 undefined 여부를 검사하는 것과 마찬가지로 if문과 같은 조건문를 통하여 null일 수 있는 값에 대한 검사를 수행할 수 있다.
JavaScript 돌아가기
메인으로 돌아가기
TS는 정적 타입 검사기이다.
js와 ts의 차이점
JS에서 발생할 수 있는 일반적인 에러는 오타, 타입 실수 등이 큰 비중을 차지한다.
위와 같은 코드는 인자로 전달된 객체가 flip이라는 호출가능한 프로퍼티을 가져야만 함수가 잘동작하게 된다.
JavaScirpt 에서는 문제가 생기는지를 호출하고 실행해보아야만 알 수 있다.
TypeScript에서는 어떤 값이 함수로 전달될 수 있고 어떤 값은 실패할 것임을 설명하므로 “정적 타입 시스템”을 사용하여 코드가 실행되기전에 코드에 대하여 예측한다.
코드를 실행하기 전에 버그들을 미리 발견할 수 있는 도구가 바로 TypeScript와 같은 정적 타임 검사기이다.
js에서는 예외, ts에서는 실행 실패
js 에서는 아래와 같은 상황에서는 undefined를 반환
ts에서는 location이 저정의 되지 않았다는 오류를 발생시킨다.
ts는 코드 수정에 활용될 수 있고, 코드를 입력할 때 오류 메세지를 제공하여 코드 완성 기능을 제공한다.
시작하기
tsc 컴파일러
코드 상에서는 아무런 맡줄도 그어지지 않지만, 아래의 방법으로 tsc 명령어를 실행하여 타입 검사를 수행한다. 이렇게 tsc 명령어로 ts 파일을 컴파일 하여 js 파일을 생성한다.
js에서는 실행에 이상이 없지만, 방어적인 ts에서 오류가 생길 경우, 오류를 밷지 않도록 컴파일 할 수 있다.
타입스크립트를 사용할 때, 타입 검사는 선택사항이며, 타입 추론은 가장 관대한 기준으로 이루어지고, , 잠재적인 null/undefined 값에 대한 검사는 이루어지지 않는다. 하지만 대부분의 사용자들은 최대한으로의 타입검사를 수행해주기를 선호하기 때문에 TS에서는 엄격도 설정을 제공한다.
TS에서는 CLI에서 --strict 플래그를 설정하거나 tsconfig.json에 "strict": true를 추가하면 모든 플래그를 동시에 활성화하게 되지만, 각각의 플래그를 개별적으로 끌 수도 있다. 반드시 알아야 하는 두 가지 가장 주요한 옵션은 noImplicitAny와 strictNullChecks 이다.
noImplicitAny : 타입이 any로 암묵적으로 추론되는 변수에 대해 오류를 발생시킨다.
strictNullChecks : null과 undefined와 같은 값을 명시적으로 처리하여, null, undefined 처리를 잊었는지 체크해준다.
타입스크립트의 타입
변수의 타입 표기가 이루어 지지 않으면 문맥적으로 해석한다. 따라서 표기하지 않아도 되는것이 일반적이다.
원시타입 (string, number, boolean)
자바스크립트에서 typeof를 사용하면 타입을 확일 할 수 있는 데, 흔하게 사용되는 세가지 타입. string, number, boolean 이 있다.
배열
배열 앞에 배열의 성격을 정의할 수 있다. number[], string[]
any
타입스크립트만의 특별한 타입. 타입 검사 오류를 발생하는 것을 원치 않을 때 사용하는 것이다. 타입이 지정되지 않은 값에 대하여 타입스크립트가 문맥으로 부터 타입을 추론해내는데, 그럴 수 없다면 any 타입을 부여하는 것으로 동작한다.
함수
Made with SlashPage