PLEASE, HELP. In our project we use Jest and want to integrate Cypress. When we started integrating Cypress - it started having conflicts with Jest's types, because some of the types between Jest and Cypress have the same names. But how it could happen, if each library should have its own path to d.ts file? It looks like the types for the whole application eventually are collected in one place? Or how it is possible?
Hi Marksim Ivanov, thanks for the video, i want to learn how to build an @types project from scratch. My objective is to export only the type definitions of my project A so i can install these types in another project B. Did you have any information/video about it? please let me know
This is really helpful! Well done and thank you :) It seems like .d.ts files are a parallel to interfaces in Java, since you export function definitions but not implementations. It might be interesting to see a .d.ts file used that way
No, interfaces are a part of typescript as well. I think d.ts files are mostly used for libraries made with Javascript, so typescript users have proper typing without the code base being written in typescript.
Thanks Maksim! subcribed ^^ Im newbie to TS too & still strugling how to use the .d.ts file. Im really confused on some ponits: 1. When to use import/export & when to use ///
What about the name of the d.ts files, for example, why someone will call it index.d.ts? and can I use the same name I have for the module, for example I have stack.ts, can I make a file called stack.d.ts and import it inside stack.ts ? and what is the /// thing
this file allows you to configure the way your code is compiled and typechecked for example if it should allow you to use type any if you generate this file using tsc init - it will have comments explaining a bunch of fields there to learn about other settings you can use there check the documentation
Thank you for this video ! I finally understand why I was struggling so much to install "Vue 2" libraries like vue-zoomer or vue-picture-swipe. They didn't support typescript apparently so they don't include the /type folder with the index.d.ts definitions either. If anyone else faced this issue I resolved it by adding a 'declare module 'vue-zoomer';' line to my 'shims-vue.d.ts' file and then I can follow instructions from the Github or official website for the library in order to add the components. What this does is treats the component as an 'any' type which still works fine (you just don't get the benefits of strongly typed javascript while using typescript).
Yeah really helpful. I was confused about whether the d.ts files are just for auto-generated type definitions and/or used to define types. Your suggestion to leave .d.ts files for auto-generation and .ts file for locally defined types has cleared the mist for me.
A lot of people who are diving into TS are searching clear explanation of difference between global and namespace. What should you use? or how to make your types be available in the whole project
I'm I it's better to import export types instead of polluting the global namespace. I'll think about some example project to demonstrate how to use both though
Thank you for amazing tutorials! Which extension do you use: "VSCode Neovim" or "Vim"? If first one, how did you manage to fix mouse selection? Thank you in advance!
For a long time I was wondering what these *.d.ts files are and what these are used for. This video cleared all the doubts about it. Thanks from India for sharing.
Thanks for the video, and if you can make a video series covering tsconfig, project reference, and other topic regarding tsconfig as even the official docs aren't that easy to understand.
Would like to see how to handle Ambient Modules so i could avoid hard dependencies and thus some circular dependencies in some cases (i know that TSC handles circular dependencies, but in some cases they should be eliminated).
@@satansdeer1 I can give my recent example. Redux Ducks approach where you organize Redux into features and combine them into rootReducer and export RootState. But then you want to import same RootState into Selectors for example. Its a circular dependency. For example in Bazel it's not allowed because all module dependencies should be explicitly declared. You can't import from feature into root and then import root back into feature. So.. the way to handle this is Ambient Modules because all i need from the RootState is its type signature `const getState = (state: RootState) => state.something`. But i found it challenging to configure nested/extended tsconfig so that i would eliminate hard dependency on `import {RootState} from 'Types'` where Types is the ambient module injected in upstream tsconfig.compilerOptions.types field. I dont want to use `... from '../../../types'` because this is hard dependency. Hope this makes sense. As i said... TSC handles this easily and you dont need ambient modules and so most of devs are ok with their circular dependencies. But overall i think it's a antipatern anyway. I do not expect you to make a video on such rare usecase. Just listed my experience. Have a nice day! :)
Very helpfull Sir. I have problem like this in my express-handlebars. Many thanks from Indonesia.
It was really very helpful
Thanks Maksim for this! How about "declare" when do we use it in the d.ts file?
also wondering about this...
I think declare is used when you want to use . notation. so if you want intelisense to show available chainable methods and variables.
Thank you 🙂 though I hoped you would touch on why types declared in the d.ts files aren't "export"ed, though seemingly auto imported?!
It needs to be added in `include` parameter of tsconfig.json and the interfaces and types will be available globally in your project.
PLEASE, HELP. In our project we use Jest and want to integrate Cypress. When we started integrating Cypress - it started having conflicts with Jest's types, because some of the types between Jest and Cypress have the same names.
But how it could happen, if each library should have its own path to d.ts file?
It looks like the types for the whole application eventually are collected in one place? Or how it is possible?
Hi Marksim Ivanov, thanks for the video, i want to learn how to build an @types project from scratch. My objective is to export only the type definitions of my project A so i can install these types in another project B. Did you have any information/video about it? please let me know
This is really helpful! Well done and thank you :)
It seems like .d.ts files are a parallel to interfaces in Java, since you export function definitions but not implementations. It might be interesting to see a .d.ts file used that way
No, interfaces are a part of typescript as well. I think d.ts files are mostly used for libraries made with Javascript, so typescript users have proper typing without the code base being written in typescript.
What if I find one js library that does not include types ? And I don't want to manually write them up.. like "react-graph-vis"
did you find the solution to this?
@@bluepurplemoon5222 I ended up using react-d3-graph
Thanks Maksim! subcribed ^^
Im newbie to TS too & still strugling how to use the .d.ts file.
Im really confused on some ponits:
1. When to use import/export & when to use ///
What about the name of the d.ts files, for example, why someone will call it index.d.ts? and can I use the same name I have for the module, for example I have stack.ts, can I make a file called stack.d.ts and import it inside stack.ts ?
and what is the /// thing
Thanks a lot. Very useful. In the end you said join my Discord server. But I can't find it on you channel. No Discord icons I see on your banner.
In react what's the difference between using interface or types? Is interface possibile to add in d.ts?
How do I use my local d.ts file in angular 11 application? Do I have to follow the same process as it is shown in the video?
Please make a video about the tsconfig file. Really like your videos keep up with your amazing work 👌
Thanks, will do for sure
Extremely helpful, thanks! 😄
Hey Maksim, great channel.
As I know you don't need to export types from *.d.ts files. Types should be available w/o export/import.
Very well explained and organized. Thank you
can you tell me what is your vscode theme?
please let us know functionality of tsconfig file ? Love from India
this file allows you to configure the way your code is compiled and typechecked
for example if it should allow you to use type any
if you generate this file using tsc init - it will have comments explaining a bunch of fields there
to learn about other settings you can use there check the documentation
perfect, short and informative
Great video
Very helpful
Thank you for this video ! I finally understand why I was struggling so much to install "Vue 2" libraries like vue-zoomer or vue-picture-swipe. They didn't support typescript apparently so they don't include the /type folder with the index.d.ts definitions either.
If anyone else faced this issue I resolved it by adding a 'declare module 'vue-zoomer';' line to my 'shims-vue.d.ts' file and then I can follow instructions from the Github or official website for the library in order to add the components. What this does is treats the component as an 'any' type which still works fine (you just don't get the benefits of strongly typed javascript while using typescript).
Awesome explaination .
Yeah really helpful. I was confused about whether the d.ts files are just for auto-generated type definitions and/or used to define types. Your suggestion to leave .d.ts files for auto-generation and .ts file for locally defined types has cleared the mist for me.
Awesome
A lot of people who are diving into TS are searching clear explanation of difference between global and namespace. What should you use? or how to make your types be available in the whole project
I'm I it's better to import export types instead of polluting the global namespace. I'll think about some example project to demonstrate how to use both though
@@satansdeer1 looking forward to it!
отдуши душевно в душу
Thank you for amazing tutorials!
Which extension do you use: "VSCode Neovim" or "Vim"? If first one, how did you manage to fix mouse selection? Thank you in advance!
Really Good Content
Great! Thanks
best expplanation out there
Thanks for the explanation, I used files like that but I didn't know why.
Thanks for these explanations!
How do I generate d.ts files for an npm package that doesn't not have one ?
Great. very clear
Много информативно, благодаря!
thank you!
Nice video!
good!
Thanks for your share! Do you have blog text for this video?
For a long time I was wondering what these *.d.ts files are and what these are used for.
This video cleared all the doubts about it.
Thanks from India for sharing.
salvador dali!
Хороший английский
Thanks for the video, and if you can make a video series covering tsconfig, project reference, and other topic regarding tsconfig as even the official docs aren't that easy to understand.
Thanks this is quite helpful, as I'm learning
Hej, Maksim Great channel and material. What shell plugin do You use for the terminal? zsh?
Thats precisely i was looking for. Thanks for a very short and clear video
Great lesson! Thank you very much!
You are plain awesome! The best explanation to understand types in TypeScript.
Thank you Maksim! Excellent explanation!
thanks for the video. it is well explained
Thank you so much for this!
thanks, I forgot what they were for
I'm still stuck...
Would like to see how to handle Ambient Modules so i could avoid hard dependencies and thus some circular dependencies in some cases (i know that TSC handles circular dependencies, but in some cases they should be eliminated).
tbh i rarely use them, can you guve me ab example where you have problems with them?
@@satansdeer1 I can give my recent example. Redux Ducks approach where you organize Redux into features and combine them into rootReducer and export RootState. But then you want to import same RootState into Selectors for example. Its a circular dependency. For example in Bazel it's not allowed because all module dependencies should be explicitly declared. You can't import from feature into root and then import root back into feature. So.. the way to handle this is Ambient Modules because all i need from the RootState is its type signature `const getState = (state: RootState) => state.something`. But i found it challenging to configure nested/extended tsconfig so that i would eliminate hard dependency on `import {RootState} from 'Types'` where Types is the ambient module injected in upstream tsconfig.compilerOptions.types field. I dont want to use `... from '../../../types'` because this is hard dependency. Hope this makes sense. As i said... TSC handles this easily and you dont need ambient modules and so most of devs are ok with their circular dependencies. But overall i think it's a antipatern anyway. I do not expect you to make a video on such rare usecase. Just listed my experience. Have a nice day! :)
Great explanations!
Hi! Which theme do you use?
Спасибо большое!
Thank you so much, this was very informative!
Great content man, more typescript videos!
Thanks a lot, man!
thx
Please Make form submit API React+typescript please
Hey, what is submit API?
@@satansdeer1 oh sorry sir it was mistaked by keyboard
Man, I have been looking for a channel like this for months!! Keep going!
Thanks man
а можно на русском тоже самое :D
Спасибки
Твои видео выходят быстрее, чем я успеваю развиваться. Спасибо большое за то, что делаешь фронтенд доступней)
Рад стараться)
спасибо, отличное видео